Is there any way of centering content texts in ::before elements background color?

Question

enter image description hereI am trying to make a social media icon project. In this project, I'm trying that if any user clicks or over any social media icon, above the icon there will be a content text which includes the social icon's name. I am doing in using tag's (::before) element but I'm trying my best but failed to center the content text to its background color. Please help me to center the text of its background color.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(235, 219, 222);
  font-family: Arial, Helvetica, sans-serif;
}

.icons {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.icons ul {
  display: flex;
  list-style-type: none;
}

.icons ul li {
  margin: 30px;
}

.icons ul a {
  text-decoration: none;
  color: black;
  font-size: 22px;
  width: 60px;
  height: 60px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 60px;
  position: relative;
}

.icons ul a::before {
  content: "Facebook";
  position: absolute;
  width: 83px;
  height: 31px;
  background-color: black;
  top: -52px;
  left: -10px;
  color: white;
  font-size: 18px;
  text-align: center;
  font-weight: 500;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />




</head>

<body>
  <div class="icons">
    <ul>
      <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-tiktok"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-bilibili"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-paypal"></i></a></li>
    </ul>
  </div>
</body>

</html>

Specify a `line-height` that matches the height ...? – CBroe May 05 '22 at 06:43 — CBroe, May 05 '22 at 06:43

score 0 · Answer 1 · answered May 05 '22 at 06:43

Add line-height:31px; on .icons ul a::before

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(235, 219, 222);
  font-family: Arial, Helvetica, sans-serif;
}

.icons {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.icons ul {
  display: flex;
  list-style-type: none;
}

.icons ul li {
  margin: 30px;
}

.icons ul a {
  text-decoration: none;
  color: black;
  font-size: 22px;
  width: 60px;
  height: 60px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 60px;
  position: relative;
}

.icons ul a::before {
  content: "Facebook";
  position: absolute;
  width: 83px;
  height: 31px;
  line-height:31px;
  background-color: black;
  top: -52px;
  left: -10px;
  color: white;
  font-size: 18px;
  text-align: center;
  font-weight: 500;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />




</head>

<body>
  <div class="icons">
    <ul>
      <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-tiktok"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-bilibili"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-paypal"></i></a></li>
    </ul>
  </div>
</body>

</html>

score 0 · Answer 2 · answered May 05 '22 at 07:08

Add line-height: 1; that will make line-height related to font size and flex to align text content to center.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(235, 219, 222);
  font-family: Arial, Helvetica, sans-serif;
}

.icons {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.icons ul {
  display: flex;
  list-style-type: none;
}

.icons ul li {
  margin: 30px;
}

.icons ul a {
  text-decoration: none;
  color: black;
  font-size: 22px;
  width: 60px;
  height: 60px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 60px;
  position: relative;
}

.icons ul a::before {
  content: "Facebook";
  position: absolute;
  width: 83px;
  height: 31px;
  background-color: black;
  top: -52px;
  left: -10px;
  color: white;
  font-size: 18px;
  text-align: center;
  font-weight: 500;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 5px;
  /* make item flex, align content to center */
  display: flex;
  align-items: center;
  justify-content: center;
  /* make line height related to content */
  line-height: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />




</head>

<body>
  <div class="icons">
    <ul>
      <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-tiktok"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-bilibili"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-paypal"></i></a></li>
    </ul>
  </div>
</body>

</html>

score 0 · Answer 3 · answered May 05 '22 at 07:42

In css line-height is either a size or a multiple of the standard line height for the font size.

It defaults to 16px which is usually the size for 1em (it can vary for multiple reasons, usually programmatically speaking it equates 1em to the body's font-size attribute. Because that sometimes can differ on, say, a Retina Display screen versus a mobile device. Pixel sizes on a 24-inch monitor at 5k are going to be far greater than those on a 12-cm (5-inch) mobile screen.

Additionally, 5px on a 27-inch 5k screen is really a lot smaller than 5px on a 12-inch laptop display with 1366-by-768 pixel size.

Consistency is key!

For these reasons, it's recommended that you avoid using pixel sizes when rendering web content, and instead use other measurement systems like point (pt), em (em or rem, depending on what you're doing), or similar. Whatever you choose, make it as consistent as you can!

That's why I agree that line-height: 1 is a good start, but also simply making them display: flex doesn't go nearly far enough.

You also need to align the items according to your preferences using the container's flexbox attributes.

The following is my own suggestion (changes to the elements only, for brevity's sake, considering how long-winded my answer is).

.icons ul {
  flex-wrap: wrap; /* Allows responsive layout for smaller screens. */
}

.icons ul li {
  display: flex;
  margin: 1.9em; /* Correction for relative display instead of pixel units. */
  justify-content: space-evenly; /* Doesn't currently work on Opera Mini or IE */
}

.icons ul a {
  /* The corrections only! */
  display: inline-flex; /* Because it makes for more consistency, 
                           where all of the objects are of the same size. */
  font-size: 1.4em; /* The below are calculated based on this font size */
  width: 2.8em;
  height: 2.8em;
  line-height: 2.8; 
}

.icons ul a::before {
  /* Again: These are the corrections only! */
  width: 3.75em;
  height: 1.4em;
  top: -52px; /* Since these are literally graphical nudges, we leave them alone! */
  left: -10px; /* But do consider relative units for non-pixel elements. */
  font-size: 1.1em;
  border-radius: 0.3em; /* Think of 5px on a Retina display. It looks square! */
  line-height: 1; /* THIS IS CORRECT! 
                     You should use multiple of the font-size 
                     (1em = 16px, usually) to calculate */
}

I hope this helps!

Is there any way of centering content texts in ::before elements background color?

3 Answers3