/* 使用 text-decoration 属性添加下划线 */
p {
text-decoration: underline;
}
/* 如果需要更复杂的下划线样式,可以使用 border-bottom 或者 ::after 伪元素 */
p.fancy-underline {
position: relative;
display: inline-block;
}
p.fancy-underline::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: red;
}
text-decoration: underline;
:这是最简单的方式,直接给文本添加下划线。适用于大多数基本场景。border-bottom
或 ::after
伪元素:如果你需要更复杂的下划线样式(例如不同颜色、宽度或位置),可以使用 border-bottom
或 ::after
伪元素来实现。希望这些示例代码对你有帮助!
上一篇:animation css3
下一篇:css文字删除线
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站