温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！
CSS中可以通过使用伪元素(::after或::before)来给div元素添加下划线。下面是一种常见的实现方式：
我们需要给div元素设置一个相对定位，这样伪元素才能相对于div元素进行定位。然后，使用伪元素来创建一个绝对定位的元素，将其放置在div元素的底部，并设置宽度为100%。给伪元素设置边框样式，通过调整边框的颜色、宽度和样式来实现下划线的效果。
下面是示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
}
div::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
在上面的代码中，我们给div元素添加了一个下划线。我们给div元素设置了相对定位，这样伪元素才能相对于div元素进行定位。然后，使用伪元素::after来创建一个绝对定位的元素，将其放置在div元素的底部，并设置宽度为100%。给伪元素设置边框样式，通过设置边框的颜色、宽度和样式来实现下划线的效果。
需要注意的是，伪元素的content属性是必须的，即使内容为空也要设置。这是因为伪元素是一个虚拟的元素，没有实际的内容，但是content属性的存在可以让伪元素在页面中生成。
除了使用伪元素，还可以使用其他方式来实现下划线的效果，比如使用border-bottom属性直接给div元素添加下划线。这种方式更加简洁，不需要使用伪元素。下面是示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
在上面的代码中，我们直接给div元素设置了border-bottom属性，将其设置为1像素的实线边框，并且颜色为黑色。这样就实现了div元素的下划线效果。
需要注意的是，使用border-bottom属性添加的下划线会占据div元素的宽度，如果希望下划线与文字内容一致，可以使用display: inline-block来让div元素根据内容自动调整宽度。
总结一下，CSS中可以通过使用伪元素(::after或::before)或者直接使用border-bottom属性来给div元素添加下划线。伪元素的方式需要给div元素设置相对定位，并使用伪元素的绝对定位来实现下划线的效果。而直接使用border-bottom属性则更加简洁，不需要使用伪元素。根据实际需求选择合适的方式来实现下划线效果。
