CODEWITHSUNDEEP
htmlcss
user17525310
user17525310

Reputation:

How to align content beside every arrow in CSS?

.arrow {
  position: relative;
  width: 120px;
  height: 0;
  border-bottom: 10px solid black;
}

.arrow::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid black;
  position: absolute;
  right: -10px;
  top: -15px;
}
<span class="">hi</span><div class="arrow"></div>
<span class="">hellow</span> <div class="arrow"></div>
<span class="">howru</span> <div class="arrow"></div>

I want to place the arrow and content in one line. like

For that. Do I need to right the arrow div, every time or is there any way to write the div.

Upvotes: 0

Views: 52

Answers (2)

Alejandro Su&#225;rez
Alejandro Su&#225;rez

Reputation: 148

Here there's another way to do it by using CSS Flexbox.

  1. You need to create a new <div> with a new class. In my case it's .arrow-row.
  2. Now, you can style .arrow-row using display: flex; and flex-direction: row;. By doing so, you get the same result but it is going to make your life easier for responsive. For example, you could add a media query so in responsive it turns to a column. In addition, you can use other Flexbox properties to define how it should behave when you resize the window.

        .arrow-row {
         display: flex;
         flex-direction: row;
         }

        .arrow {
          position: relative;
          width: 120px;
          height: 0;
          border-bottom: 10px solid black;
          margin: 0 10px;
        }

        .arrow::after {
          content: "";
          width: 0;
          height: 0;
          border-top: 20px solid transparent;
          border-bottom: 20px solid transparent;
          border-left: 30px solid black;
          position: absolute;
          right: -10px;
          top: -15px;
        }
  <div class="arrow-row">
        <span class="">hi</span><div class="arrow"></div>
        <span class="">hellow</span> <div class="arrow"></div>
        <span class="">howru</span> <div class="arrow"></div> 
    </div>

Upvotes: 0

Aman Sharma
Aman Sharma

Reputation: 964

add display: inline-block; margin: 0 10px; into .arrow

.arrow {
  position: relative;
  width: 120px;
  height: 0;
  border-bottom: 10px solid black;
  display: inline-block;
  margin: 0 10px;
}

.arrow::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid black;
  position: absolute;
  right: -10px;
  top: -15px;
}
<span class="">hi</span><div class="arrow"></div>
<span class="">hellow</span> <div class="arrow"></div>
<span class="">howru</span> <div class="arrow"></div>

Upvotes: 1

Related Questions