网页设计中，图文混排是一种非常常见的页面布局方式。而在图文混排时，我们经常需要使用到横线来分隔不同的内容区域。在CSS中，我们可以很方便地使用border属性来给元素增加一条横线。

/* CSS代码示例 */
hr {
border: none;
border-top: 1px solid #ccc;
margin-top: 20px;
margin-bottom: 20px;
}

上述CSS代码可以将hr元素的上边框设置为1像素的实线，并设置顶部和底部的外边距为20像素。如果我们想要设置虚线或点线，只需要将border-top改为border-top-style并设置相应的样式即可：

/* CSS代码示例 */
hr {
border: none;
border-top-style: dotted;
border-top-width: 1px;
margin-top: 20px;
margin-bottom: 20px;
}

同样地，我们也可以给文本元素添加一条横线。这时候，我们需要将文本元素设置为行内元素，并为其添加一个下划线文本装饰线。

/* CSS代码示例 */
p {
display: inline;
text-decoration: underline;
}

上述代码可以将所有段落元素设置为行内元素，并添加下划线文本装饰线。如果我们只想要添加一个横线，可以选择使用:before伪元素：

/* CSS代码示例 */
p:before {
content: "";
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
margin-right: 10px;
}

上述代码可以给所有段落元素的前面添加一条1像素实线。其中，before伪元素的content必须设为空字符串，否则将不会显示。