Question 106056 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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

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:

enter image description here

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;  
}
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search