p::after { content: ""; display: block; border-bottom: 1px dashed red; }
上面的CSS代码中,“content: “””表示在元素的内容之后插入一个空内容;“display: block;”表示生成的内容会作为一个块级元素显示;“border-bottom: 1px dashed red;”表示为这个块级元素绘制一条1像素的红色虚线边框,即画线。
值得注意的是,大家需要确保从哪个元素开始重新绘制边框,以避免重复绘制边框。例如,如果大家有如下HTML代码:
Welcome to My Site
This is some text.
Here is some more text.
大家需要确保只在段落下方插入虚线,而不是在所有元素下方插入虚线。因此,大家需要修改CSS代码如下:
.wrapper p::after { content: ""; display: block; border-bottom: 1px dashed red; }
这样一来,只有在包含类名为”.wrapper”的元素内的所有段落下方才会插入虚线。