CODEWITHSUNDEEP
htmlcss
EnexoOnoma
EnexoOnoma

Reputation: 8836

How to style this <li> so as the second row of the sentence to start just below the beginning of it and not below bullet?

My question is how can I make the second row of a li to start right below the beginning of the sentence and not below the arrow?

<ul class="arrow-list">
    <li>Clear and consistent brand identity</li>
    <li>+47.08% Increase in website registrations</li>
</ul>

.arrow-list li {
  color: #0054a6;
  margin-bottom: 4px;
  display: block;
}
.arrow-list li:before {
  font-family: 'ElegantIcons';
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: "\39";
  color: #0054a6;
  font-size: 18px;
  display: inline-block;
  margin-right: 18px;
  position: relative;
  top: 4px;
}

enter image description here

Upvotes: 3

Views: 57

Answers (2)

dippas
dippas

Reputation: 60563

you can give position:relative to li (the parent in this case) and then replace position:relative for position:absolute in li:before (which is the child) so the arrow can move in anyway you want.

From MDN

Absolute

Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

Just a quick note, you were using content:\39 which results in 9 if you want to achieve the double arrow then you should use content:\bb

/*demo styles - width is to force break line*/
*, *:before, *:after {
    box-sizing:border-box
}
.arrow-list {
  width: 260px;
  border: 1px dashed red;
  margin: 0;
  padding: 0
}
/*end demo styles*/

.arrow-list li {
  color: #0054a6;
  margin: 0 0 4px 0;
  display: block;
  position: relative;
  left:0%;
  padding: 2% 0 2% 7% /*demo styles */
}
.arrow-list li:before {
  font-family: 'ElegantIcons';
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  content: "\bb";
  -webkit-font-smoothing: antialiased;
  color: #0054a6;
  font-size: 18px;
/*  display: inline-block; not needed */
  position: absolute;
  top: 4px;
  left: 2%
}
<ul class="arrow-list">
  <li>Clear and consistent brand identity</li>
  <li>+47.08% Increase in website registrations</li>
</ul>

Upvotes: 0

KZee
KZee

Reputation: 446

Something like this:

.arrow-list li {
    position: relative;
    margin-left: 20px;
}
.arrow-list li:before{
    position: absolute;
    left: -20px;
}

http://jsfiddle.net/kz41hvfu/

Upvotes: 1

Related Questions