文本旁边的边框线 | 文本旁边的边框线

本文介绍了文本旁边的边框线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个p标签。我想要一个边框线旁边。

I have a p tag. I want a border line next to it.

<p style="margin-left: -30px;font-size: 12px;margin-bottom: 2px;"><strong> Categories</strong></p>

我要在p标签旁边添加一行，如下图所示。

I want to add a line next to p tag as the following image.

如何实现它？

请帮助，
感谢

Please help,Thanks

推荐答案

使用伪元素

CSS

p {
    font-size: 12px;
    margin-bottom: 2px;
    overflow: hidden;
    position: relative;

   }

p:after {
    content:"";
    position: absolute;
    border-bottom:1px solid grey; /* border-size & color are now controllable */
    width:100%;
    height:1em;
    display: inline;
    margin-left: 1em;
}

这篇关于文本旁边的边框线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！