0

スクリーンショットのように、文言部分の中央に来ると線が透明になるとどうなりますか? それを達成するためにCSSグラデーションを使用できますか?

ここに画像の説明を入力

    h2.section-title {
		font-size: 34px;
		font-weight: 400;
		text-transform: uppercase;
	}
	.section-divider h2 {
		display: inline-block;
		padding: 1rem;
		position: relative;
		top: -5rem;
		background-color: transparent;
	}
	.section-divider {
		border-top: 1px solid #fff;
		
		margin-top: 4rem;
		margin-bottom: 0;
		text-align: center;
	}
<div class="section-divider">
     <h2 class="text-center section-title" lang="en">Highlights</h2>
</div>

4

1 に答える 1

1

まあ、これは私の答えではありません。質問のコメントセクションで@Sachinから提供されたソリューションのコードスニペットを追加しています。

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>

于 2015-04-30T11:58:28.713 に答える