my code stock.com

[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタ
by Junichi Murashige

Share on Facebook Share on Twitter Share on Google+ Share on Pinterest

Snippet options

Download: Download snippet as css.html.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

.lines-on-sides {
    display: table;
    text-align: center;
    white-space: nowrap;
 
    &:after,
    &:before {
        content: '';
        display: table-cell;
        width: 50%;
        background: linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 2px), transparent calc(50% + 2px));
        background-clip: padding;
    }
 
    &:after {
        border-left: 1em solid transparent;
    }
 
    &:before {
        border-right: 1em solid transparent;
    }
}
 
h2 {
  font-size: 1.5em;
  color: hsl(30, 70, 80);
  @extend .lines-on-sides
}
 
h3 {
  font-size: 1em;
  color: hsl(30, 70, 20);
}

通常のスタイルシートにすると、こんな感じに。

.lines-on-sides, h2 {
  display: table;
  text-align: center;
  white-space: nowrap;
}
.lines-on-sides:after, h2:after, .lines-on-sides:before, h2:before {
  content: '';
  display: table-cell;
  width: 50%;
  background: -webkit-linear-gradient(transparent 50%, currentColor 50%, currentColor -webkit-calc(50% + 1px), transparent -webkit-calc(50% + 1px));
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, currentColor), color-stop(currentColor calc(50% + 1px)), to(transparent calc(50% + 1px)));
  background: linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px));
  -webkit-background-clip: padding;
  background-clip: padding;
}
.lines-on-sides:after, h2:after {
  border-left: 1em solid transparent;
}
.lines-on-sides:before, h2:before {
  border-right: 1em solid transparent;
}
 
h2 {
  font-size: 1.5em;
  color: #f0cca8;
}
 
h3 {
  font-size: 1em;
  color: #57330f;
}

:afrer, :beforeのとこの値を変更。

.lines-on-sides:after {
  border-left: 1em solid transparent;
}
.lines-on-sides:before {
  border-right: 1em solid transparent;
}

<body>
 
  <h2>テキストの左右に</h2>
   
  <h3 class="lines-on-sides">水平のラインを描く</h3>
 
</body>

<!--ああああ-->

Fullscreen Use Snippet on jsFiddle.net

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now