CODEWITHSUNDEEP
htmlcss
user3550879
user3550879

Reputation: 3469

css 'content' feature not showing

I have two buttons (each has a rotated div inside to create a triangle on bottom and top of page)

<button id="arrow-up">
    <div id="rotate-up"></div>
</button>
<button id="arrow-down">
    <div id="rotate-down"></div>
</button>

css

#arrow-down, #arrow-up { 
  display: block;
  position: absolute;
  z-index: 200;
  width: 80px; height: 55px;
}

#rotate-down, #rotate-up {
  border:none;
  position: relative;
  height: 100%; width: 100%;
  transform-origin: center left;
  background-color: #fff;
  margin-left: 20px;
}

#rotate-down {
  border-bottom:none;
  transform:rotate(45deg);
}

#rotate-up {
  border-top:none;
  transform:rotate(-45deg);
}

I want to add a black chevron pointing up/down in each button. I wanted to use css

content: "/...";

to avoid adding any extra divs, to keep it simple, but I can't get it to show on my buttons despite where I put it (I tested it with just a letter).

Upvotes: 3

Views: 1380

Answers (1)

B&#225;lint
B&#225;lint

Reputation: 4039

The content property is exclusive to the ::after (:after) and ::before (:before) selectors.

#yourElement:before {
    content: "your content";
}

Upvotes: 4

Related Questions