0

It looks like that:

enter image description here

hr {
  position: relative;
  border: none;
  overflow: visible;
  text-align: center;
  width: 80%;
  top: 3%;
  left: 10%;
  border-top: 3px solid #c7a175;
  border-radius: 2px;
}

hr::after {
  background-color: white;
  content: '\f6ae';
  font: var(--fa-font-solid);
  padding: 0 6px;
  position: relative;
  top: -10px;
}
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>
  <hr>
</body>

I need the icon to appear normally. Even if I use div to create a line, it won't work.

How to fix this?

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Terraxin
  • 1
  • 2
  • `
    ` is a replaced element and as such is contentless. As such, pseudo-element such as `::before` and `::after` does not work on them.     – tacoshy Apr 06 '23 at 11:42
  • 1
    https://developer.mozilla.org/ru/docs/Web/HTML/Element/hr tacoshy, check this page. Here is content in
    .     – Terraxin Apr 06 '23 at 12:00
  • Have you tried with another FA icon? `\f0da` works, but your `\f6ae` does not as it is not part of the 'Free' set... – Rene van der Lende Apr 06 '23 at 14:00

0 Answers0