css下边框下划线

CSS下边框下划线是网页设计中的经典效果之一，它可以为网页增添一份简洁美感。本文将详细介绍如何使用CSS来添加下边框下划线效果。

 .underline {
    border-bottom: 1px solid #000;
    /* 下划线样式：实线（solid）、粗细（1px）、颜色（#000） */
    padding-bottom: 5px;
    /* 文本距离下边框的距离 */
  } 

上面的代码是添加下划线的最基本样式。

若希望使文字在鼠标悬停时出现动画效果，可以使用CSS3的过渡效果。

 .underline:hover {
    border-bottom-color: #f00;
    /* 鼠标悬停时下划线颜色变为红色（#f00） */
    transition: border-bottom-color .3s ease-in-out;
    /* 过渡样式：属性（border-bottom-color）、时间（.3s）、缓动效果（ease-in-out） */
  } 

以上代码即可使下划线在鼠标悬停时颜色渐变。若希望初始状态下下划线存在，可以使用伪类选择器：

 .underline::after {
    content: ';
    display: block;
    height: 1px;
    border-bottom: 1px solid #000;
    margin-top: 5px;
    /* 下划线距离文字的距离 */
  } 

以上代码会在文本下方添加一条下划线。若要实现动画效果，可以将伪类选择器放入实际元素选择器内，然后使用过渡效果：

 .underline:hover::after {
    border-bottom-color: #f00;
    transition: border-bottom-color .3s ease-in-out;
  } 

以上即是CSS下边框下划线的基本实现方法。细节效果可依据设计需求进行调整。