常常要設定標題左右可帶有橫線且必須有RWD功能的作法如下：
HTML
<div class="container">
<h3 class="title">
<span>財務報告</span>
</h3>
</div>CSS
/標題左右橫線/
.container {
width: 100%;
margin: auto;
}
.title {
color: #ffaa22;
font-size: 1.2rem;
margin-bottom: 1.5em;
text-align: center;
font-weight: 600;
line-height: 1.3;
}
.title span {
display: block;
font-family: 微軟正黑體;
font-size: 1.2rem;
color: #B3A619;
position: relative;
}
@media screen and (max-width: 400px) {
.title span:before, .title span:after {
content: “”;
position: absolute;
top: 50%;
background: #B3A619;
width: 23%;
height: 1px;
}
}
@media screen and (min-width: 400px) and (max-width: 768px) {
.title span:before, .title span:after {
content: “”;
position: absolute;
top: 50%;
background: #B3A619;
width: 32%;
height: 1px;
}
}
@media screen and (min-width: 768px) {
.title span:before, .title span:after {
content: “”;
position: absolute;
top: 50%;
background: #B3A619;
width: 38%;
height: 1px;
}
}
.title span:before {
left: 2%;
}
.title span:after {
right: 2%;
}
