Why margin: 0 auto; is not working. on this unicode icon pseudo after element; ;-CodePudding

h1::after {
    content: "\f005";
    font-family: "Font Awesome 5 Free";
    color: #E1C340;
    width: calc(var(--width) - 80vw);
    height: 25px;
    font-size: 3rem;
    display: block;
    margin: 0 auto;
    border-bottom: 10px solid var(--line_color);
}

I want to center this star

How can I do that ?

CodePudding user response：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Comfortaa', cursive;
}

:root {
    --text_color: #E1C340;
    --bg_color: #A4E8E0;
    --star_color: #F8EA8C;
    --line_color: #4CD7D0;
    --width: 100vw;
}

.main_div {
    height: 100vh;
    display: flex;
    justify-content: center;
    padding-top: 20vh;
    background-color: var(--bg_color);
}

h1 {
    color: var(--text_color);
    font-size: 4rem;
}

h1::after {
    content: "\f005";
    font-family: "Font Awesome 5 Free";
    color: #E1C340;
    width: calc(var(--width) - 80vw);
    height: 25px;
    font-size: 3rem;
    display: block;
    margin: 0 auto;
    border-bottom: 10px solid var(--line_color);
}

<!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">
    <link
        href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&family=JetBrains Mono:wght@300;400;500&display=swap"
        rel="stylesheet">
    <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" />
    <link rel="stylesheet" href="./6_calc.css">
    <title>Calc()</title>
</head>

<body>
    <div >
        <h1>Technoxa</h1>
    </div>
</body>

</html>

CodePudding user response：

You can display the pseudo element as flex rather than block and set it to justify-content center:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Comfortaa', cursive;
}

:root {
  --text_color: #E1C340;
  --bg_color: #A4E8E0;
  --star_color: #F8EA8C;
  --line_color: #4CD7D0;
  --width: 100vw;
}

.main_div {
  height: 100vh;
  display: flex;
  justify-content: center;
  padding-top: 20vh;
  background-color: var(--bg_color);
}

h1 {
  color: var(--text_color);
  font-size: 4rem;
}

h1::after {
  content: "\f005";
  font-family: "Font Awesome 5 Free";
  color: #E1C340;
  width: calc(var(--width) - 80vw);
  height: 25px;
  font-size: 3rem;
  margin: 0 auto;
  border-bottom: 10px solid var(--line_color);
  display: flex;
  justify-content: center;
}

<!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">
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&family=JetBrains Mono:wght@300;400;500&display=swap" rel="stylesheet">
  <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"
  />
  <link rel="stylesheet" href="./6_calc.css">
  <title>Calc()</title>
</head>

<body>
  <div >
    <h1>Technoxa</h1>
  </div>
</body>

</html>