CODEWITHSUNDEEP
csssvg
user1658296
user1658296

Reputation: 1418

Resize svg applied as before and after element

I have two svg images applied before and after an 'a' tag, in the following way: 

      <li>         
       <a href="#">
        plan
       </a>
      </li>

css: 

.navigation ul li::before {content:url('left.svg'); position: relative; top: 6px;}
.navigation ul li::after {content:url('right.svg'); position: relative; top: 6px;}

The images appear, but they are enormous, so I tried resizing them this way: 

      <svg width="10" height="23" viewbox="0 0 102 102">
      <li>
        <a href="#">
          explore
        </a>
      </li>
      </svg>

But the svg markup is not applied to the svg image, it only takes the 'a' tag as a child. I'm getting really lost as to how to do this effectively/simply - all I want to do is make sure those svg images which appear before and after the a tag, are scaled down.

Upvotes: 3

Views: 5571

Answers (1)

zessx
zessx

Reputation: 68820

Instead of using your SVG picture inside content, you could use it as a background-image, and add height/width to your pseudo-elements:

.navigation ul li:before,
.navigation ul li:after {
  content: " ";
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg');
  background-size: cover;
  position: relative;
  display: inline-block;
  top: 6px;
  width: 20px;
  height: 20px;
}
<nav class="navigation">
  <ul>
    <li>         
      <a href="#">plan</a>
    </li>
  </ul>
</nav>

Upvotes: 5

Related Questions