CODEWITHSUNDEEP
htmlcssfont-awesome
MH.
MH.

Reputation: 557

Keep HTML-link within a list in the same line as ::before pseudo-element

I have replaced the common disc of a list with a FontAwesome symbol using the ::before pseudo-element. Everything works fine so far:

CSS-Code (Example 1)

ul {
  list-style: none;
}

ul li::before {
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  margin-left: -3rem;
  padding: 1rem;
}

li { 
  background-color: yellow;
  margin: 0.25rem;
}

li a {
  border: solid 1px red;
}

HTML (Example 1)

<ul>
  <li><a href="https://stackoverflow.com/">Stackoverflow</a></li>
  <li><a href="https://jsfiddle.net">JsFiddle</a></li>
</ul>

See: Example 1 on JsFiddle

But now, I'd like to display the links in the list as block element. Usually, this is done by addiing display: block;in li a. So the CSS-Code in Example 1 changes to:

CSS-Code (Example 1*)

li a {
  display: block;
  border: solid 1px red;
}

However, the links do not remain in the same line any more, see: Example 1* on JsFiddle

What is missing/What is wrong? When using display: block in combination with the default list style (without pseudo-element), everything works as expected (that is: the link is displayed as block element; the link and the disc symbol of the list are still in the same line):

CSS-Code (Example 2 - the standard)

ul {
  /* default: list-style: disc; */
}

li { 
  background-color: yellow;
  margin: 0.25rem;
}

li a {
  display: block;
  border: solid 1px red;
}

See: Example 2 (Standard list with link in block-style)

Upvotes: 1

Views: 1301

Answers (1)

zer00ne
zer00ne

Reputation: 43950

Add these two property/values to li a selector:

display: inline-block;
width: 100%;

  • display: inline is the default for <a>. Width cannot be set -- inline elements are formless like water.

  • display: block makes elements solid and occupies the whole area right and left by default. Even if its width is set to something smaller, it will insist that it'd be the only one to occupy its own line. That's the reason for the displacement seen in Example 1. Block elements are unyielding like metal.

  • 👍 display: inline-block will sit easily with neighbors to the left and right of it and width can be set. Inline-block elements are flexible like clay.

BTW for aesthetics try text-decoration: none on li a and don't forget:

a:link
a:visited
a:hover
a:active

in that specific order.

Demo

:root,
body {
  font: 400 16px/1.45 Verdana
}

ul {
  list-style: none;
}

li {
  position: relative;
  width: 99%;
  margin-bottom: 6px;
}

li::before {
  position: absolute;
  left: -1.5rem;
  display: inline-block;
  line-height: 1.45;
  vertical-align: middle;
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  padding: 0.15rem 0 0 0;
}

li a {
  display: inline-block;
  line-height: 1.45;
  height: 21px;
  width: 100%;
  padding: 3px 6px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  outline: solid 1px red;
  background-color: yellow;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<ul>
  <li><a href="https://stackoverflow.com/">Stackoverflow</a></li>
  <li><a href="https://jsfiddle.net">JsFiddle</a></li>
  <li><a href="https://example.com" title='XXXXXXXxxxxx XXXXXXX XXXX XXXXXX XXXXX  x  xxxXXXXX XXXXXXxxx XXX XXXXxxxxxx xxxxxxxxxxxxxXXXx xxxxxxxx'>XXXXXXXxxxxx XXXXXXX XXXX XXXXXX XXXXX  x  xxxXXXXX XXXXXXxxx XXX XXXXxxxxxx xxxxxxxxxxxxxXXXx xxxxxxxx </a></li>
</ul>

Upvotes: 2

Related Questions