如何在WordPress的wp-caption-text左侧添加仅匹配首行的彩色矩形

实现方案 #

你原来的写法是给整个标题元素加边框，边框会跟随元素的整体高度，所以多行标题时会纵向拉伸，不符合仅首行左侧显示的需求。可以通过::before伪元素实现需求，该伪元素作为行内块插入到文本最前方，仅会出现在首行位置：

div.wp-caption p.wp-caption-text {
    /* 预留左侧色块的空间，数值可自行调整 */
    padding-left: 16px;
}

div.wp-caption p.wp-caption-text::before {
    content: "";
    /* 行内块属性保证只跟随首行文本排布 */
    display: inline-block;
    /* 色块尺寸，可根据需要调整 */
    width: 4px;
    height: 1em;
    background-color: #008ed4;
    /* 调整色块和文本的对齐方式与间距 */
    vertical-align: middle;
    margin-right: 8px;
    margin-left: -16px;
}

如果需要调整色块的粗细、颜色、和文本的间距，对应修改宽度、background-color、margin参数即可。

内容的提问来源于stack exchange，提问作者user3169905