元素的宽度取决于另一个元素的宽度 - WITHOUT JavaScript
Width of the element depending on the width of another element - WITHOUT JavaScript
我需要 .divider
元素的长度等于文本的长度 (.topic
class) + 2em , 所以分隔符比文本长一点。这可能仅使用 CSS(无 JS)吗?
这是代码(和 JSFiddle):
<div class="divider"></div>
<div class="topic">
<div class="topic_symbols">@</div>
<div class="topic_text">THIS IS THE SAMPLE TEXT</div>
<div class="topic_symbols">@</div>
</div>
<div class="divider"></div>
.divider {
border-bottom: 2px solid #fdb239;
margin-left: 10%;
margin-right: 10%;
}
.topic {
display: flex;
font-family: Tahoma, Geneva, sans-serif;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: calc(0.8em + 2.3vw);
}
.topic_symbols {
color: #ee290b;
}
.topic_text {
text-align: center;
color: #3cae3f;
margin: 1% 1em 1% 1em;
}
不要使用 div 样式,而是使用 .topic_text
div.
的伪元素
.topic_text:before,
.topic_text:after {
content: "";
border-bottom: 2px solid #fdb239;
position: absolute;
width: calc(100% + 2em); /* adjust as required */
left: -1em;
}
.topic_text:before {
top: -.25em;
/* adjust as required */
}
.topic_text:after {
bottom: -.25em;
}
.topic {
display: flex;
font-family: Tahoma, Geneva, sans-serif;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: calc(0.8em + 2.3vw);
margin-top: 1em;
}
.topic_symbols {
color: #ee290b;
}
.topic_text {
text-align: center;
color: #3cae3f;
position: relative;
}
<div class="topic">
<div class="topic_symbols">@</div>
<div class="topic_text">THIS IS THE SAMPLE TEXT</div>
<div class="topic_symbols">@</div>
</div>
我需要 .divider
元素的长度等于文本的长度 (.topic
class) + 2em , 所以分隔符比文本长一点。这可能仅使用 CSS(无 JS)吗?
这是代码(和 JSFiddle):
<div class="divider"></div>
<div class="topic">
<div class="topic_symbols">@</div>
<div class="topic_text">THIS IS THE SAMPLE TEXT</div>
<div class="topic_symbols">@</div>
</div>
<div class="divider"></div>
.divider {
border-bottom: 2px solid #fdb239;
margin-left: 10%;
margin-right: 10%;
}
.topic {
display: flex;
font-family: Tahoma, Geneva, sans-serif;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: calc(0.8em + 2.3vw);
}
.topic_symbols {
color: #ee290b;
}
.topic_text {
text-align: center;
color: #3cae3f;
margin: 1% 1em 1% 1em;
}
不要使用 div 样式,而是使用 .topic_text
div.
.topic_text:before,
.topic_text:after {
content: "";
border-bottom: 2px solid #fdb239;
position: absolute;
width: calc(100% + 2em); /* adjust as required */
left: -1em;
}
.topic_text:before {
top: -.25em;
/* adjust as required */
}
.topic_text:after {
bottom: -.25em;
}
.topic {
display: flex;
font-family: Tahoma, Geneva, sans-serif;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: calc(0.8em + 2.3vw);
margin-top: 1em;
}
.topic_symbols {
color: #ee290b;
}
.topic_text {
text-align: center;
color: #3cae3f;
position: relative;
}
<div class="topic">
<div class="topic_symbols">@</div>
<div class="topic_text">THIS IS THE SAMPLE TEXT</div>
<div class="topic_symbols">@</div>
</div>