Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

css文本下划线

作者:一脸帅气   发布日期:2025-05-17   浏览:113

/* 示例代码:为文本添加下划线 */

/* 方法1:使用 text-decoration 属性 */
p.underline {
    text-decoration: underline;
}

/* 方法2:使用 border-bottom 属性 */
p.border-underline {
    border-bottom: 1px solid black;
}

/* 方法3:使用 ::after 伪元素 */
p.after-underline::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: black;
    margin-top: 2px;
}

解释说明:

  1. text-decoration: underline;

    • 这是最简单的方式,直接给文本加上下划线。适用于简单的文本下划线需求。
  2. border-bottom: 1px solid black;

    • 使用 border-bottom 可以更灵活地控制下划线的样式(如颜色、粗细等)。适合需要自定义下划线样式的场景。
  3. ::after 伪元素

    • 通过 ::after 伪元素创建一个额外的元素来模拟下划线效果。这种方式可以实现更复杂的下划线样式,比如带间距或动画效果。

上一篇:css display: flex

下一篇:css 兄弟元素

大家都在看

css 红色

css文字超长省略号

css 渐变字体

css背景图片等比例缩放

css文字删除线

css 自定义滚动条

css flex gap

css上一个兄弟元素怎么找到

css文字超出隐藏变省略号鼠标上去展示完整

css文字不允许换行

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站