CODEWITHSUNDEEP
htmlcss
user2879704
user2879704

Reputation:

Triangle drawn using css borders appears on the top of the text

Triangle next to my text is vertically aligned towards the top instead of being in same level as the text.

It looks like,

enter image description here

Plunker code is here.

My css for triangle is,

.arrow-down {
   width: 0; 
   height: 0; 
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 10px solid #000;   
 }

Note: Alternatively, i tried to display a triangle using the unicode \25BC but it didn't appear.

<span class="triangle"></span>

 .triangle{
   display: inline-block;
   width: 20px;
   height: 20px;
   content : '\25BC';
 }

Upvotes: 0

Views: 30

Answers (2)

E.Agolli
E.Agolli

Reputation: 550

Just add display: inline-block; to your style of arrow.

Upvotes: 0

Justinas
Justinas

Reputation: 43557

Setting display: inline-block; for .arrow-down will fix issue by allowing inline element to take defined height and width:

/* Styles go here */

.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
  display: inline-block;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  Level One Menu
  <span class="arrow-down"></span>
</body>

</html>

Note explained

It does not work because content has only pseudo-elements :before and :after

.triangle:after {
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '\25BC';
}
<span class="triangle"></span>

Upvotes: 1

Related Questions