想知道如何使用 CSS 來獲得這個設計嗎？它有點像 H1 標題下的酒紅色 CSS
我能得到的最接近的是：
h1 {
font-size: 48px;
color: #16343E;
font-family: 'Roboto', sans-serif;
font-weight: 900;
display: inline;
background-image: linear-gradient(#fff 60%, #863034 55%);
}
<h1>Welcome</h1>
uj5u.com熱心網友回復：
我已經盡可能地接近它。
的HTML：
<h1>WELCOME</h1>
CSS：
h1 {
font-family:helvetica;
display: inline-block;
border-bottom: 30px solid #A66;
line-height: 0;
padding: 0 15px;
}
請參閱：
uj5u.com熱心網友回復：
這是另一個帶有偽元素的選項：
h1 {
display: inline-block;
padding: 0 3rem;
text-transform: uppercase;
position: relative;
}
h1::after {
content: '';
left: 0;
bottom: -10px;
position: absolute;
width: 100%;
height: 30px;
background: tomato;
z-index: -1;
}
uj5u.com熱心網友回復：
html
h1{
position: relative;
}
.under-lined-color{
position: absolute;
bottom: 2px; //Change this accordingly
}
<h1>WELCOME</h1>
<span class="under-lined-color"></span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/515380.html
標籤：htmlcss