css Question posted in
Some basic documentation can be found here.

Css – Adding an IMAGE inside the ::before Selector

I wanted to add an Icon of Quotation Marks before the start of my paragraph, because I’ve seen this being done in some other websites.

So I tried to play a bit with the width, height & font-size properties – But I can’t figure out how to scale that image down to fit the size of the paragraph.

HERE IS THE QM ICON:

quote image

HERE IS THE CODE:

.article {
  padding-top: 2%;
}

.article::before {
  content: url(https://i.sstatic.net/mdeKRzYD.png);
  display: inline-block;
  /* top: 4px; */
  /* float: left; */
  /* width: 13px; */
  font-size: 10px;
}
<div class="article">
  <p>Blah blah blah, some text to fill the space.</p>
</div>
Tags:

3

Answers


  1. 0

    Using background-image rather than content seems to be a better option here for a PNG image.

    Firstly, set your font size in the parent paragraphs with class .article then create a new containing block using position: relative. To leave some space for your quotation mark set text-indent to 1em. Using em units means it will scale with the font-size.

    On your ::before pseudo element, set the size of the background image to the same character size as your main text, again using em units to scale with the parent.

    Use position:absolute to give you take the quotes out of the flow of the parent element and use top and left to position it where you want.

    .article {
  /*padding-top: 2%;*/
  position: relative;
  display: inline-block;
  font-size: 50px;
  text-indent: 1em;
}

.article::before {
position: absolute;
  /*content: url(https://i.sstatic.net/mdeKRzYD.png);*/
  content: "";
  background-image: url(https://i.sstatic.net/mdeKRzYD.png);
  background-size: 100% 100%;
  position: absolute;
  top: 0.5em;
  left: 0em;
  width: 1em;
  height: 1em;
}
    <div class="article">
  <p>Blah blah blah, some text to fill the space.</p>
</div>
    Login or Signup to reply.
  2. 0

    You can use background-image and background-size together with position absolute. You can also add transform: translate to better adjust its position

    .article {
 margin-left:35px;
 position:relative;
}

.article::before {
  content: '';
  background-image: url('https://i.sstatic.net/mdeKRzYD.png');
  background-size: 20px 20px;
  position:absolute;
  left:0;
  top:0;
  width:30px;
  height:30px;
  transform:translate(-100%,-50%);
}
    <div class="article">
  <p>Blah blah blah, some text to fill the space.
    Blah blah blah, some text to fill the space.Blah blah blah, some text to fill the space.Blah blah blah, some text to fill the space.Blah blah blah, some text to fill the space.
  
  </p>
</div>
    Login or Signup to reply.
  3. 0

    No need to use an image, you can did it in css only:

    blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    width: 500px;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}

blockquote:before {
    display: block;
    padding-left: 10px;
    content: "201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
}

blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

blockquote cite:before {
    content: "2014 2009";
}

    Original answer: Make big quotes with <blockquote>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search