How to align content beside every arrow in CSS?-CodePudding

.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 >hi</span><div ></div>
<span >hellow</span> <div ></div>
<span >howru</span> <div ></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.

CodePudding user response：

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 >hi</span><div ></div>
<span >hellow</span> <div ></div>
<span >howru</span> <div ></div>

CodePudding user response：

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

You need to create a new <div> with a new class. In my case it's .arrow-row.
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 >
        <span >hi</span><div ></div>
        <span >hellow</span> <div ></div>
        <span >howru</span> <div ></div> 
    </div>