How to create a colored rectangle to left of wp-caption-text-CodePudding

On a WordPress site, in a blog post, I'm attempting to achieve this effect of having a colored rectangle just to the left of an image's caption:

I've tried this, but it puts the rectangle vertically spanning the entire caption. In other words, when the text wraps down one or more lines, the rectangle continues spanning the text downward. In my case, I only want the rectangle to appear next to the first line of the wrapping text.

Here's all I have right now.

div.wp-caption p.wp-caption-text {
    border-top: 40px solid;
    padding-left: 12px;
    border-color: #008ed4;  
}

CodePudding user response：

I would suggest using the :before selector and trying something like this:

div.wp-caption p.wp-caption-text {
    position: relative;
    margin-left: 60px;
}

div.wp-caption p.wp-caption-text:before {
    content: '';
    display: block;
    height: 8px;
    width: 46px;
    left: -60px;
    position: absolute;
    background-color: #008ed4;  
}

Using the css :before selector and giving it a content: ''; allows you to essentially fake adding an item to the dom using css.

I'm not sure if this is exactly what you want, but I think it will be enough to get you started.

CodePudding user response：

You could indent the first line of the caption and put in a background image (a linear-gradient) that goes in that indent.

This means the caption will wrap under the blue rectangle and I'm not absolutely sure whether that is what you want or not (if not then @BrettEast suggestion of a pseudo element looks promising).

div {
  text-indent: 2.5em;
  background-image: linear-gradient(#008ed4, #008ed4);
  background-size: 2em 0.75em;
  background-position: left 0.25em;
  background-repeat: no-repeat;
}

<div>aaaaaaa aaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa aa aaaaaaaaa </div>