p { position: relative; } p::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 1px; width: 50%; background-color: black; }
首先,大家需要给要添加下划线的段落设置定位属性,这样大家才能够使用伪类选择器。在这个例子里,大家将它的position属性设置为relative。
接着,大家使用伪类选择器::after来在段落的结尾处添加一个元素。大家设置这个元素的内容为””,并把它的position属性设置为absolute,这样它就跑到了它的父元素p的底部。
接下来,大家使用left属性把它的左边缘移动到父元素的中央。大家还设置它的width属性为50%,以便它只覆盖了父元素的一半宽度。在这个例子里,大家把它的高度设置为1像素,把它的颜色设置为黑色。
这样,大家的段落就有了一半下划线!记得要根据你的设计需要对CSS进行更改。