Why when you remove the border of a button - a cross breaks?

April 19th 20 at 12:33
2 answers
April 19th 20 at 12:35
Solution
Because the sizes vary
and all of this is fine to do cross?
https://jsfiddle.net/mua8zp0e/ - Doug_Mill commented on April 19th 20 at 12:38
@Doug_Millif you want to animate, then fine.
If not,
content: "╳" the font to change to arial or something. - bailey.Tillman commented on April 19th 20 at 12:41
@Doug_Millwhy new ACC? - bailey.Tillman commented on April 19th 20 at 12:44
@bailey.Tillman, I mean new? today I just started coding - Doug_Mill commented on April 19th 20 at 12:47
April 19th 20 at 12:37
Solution
Because by default, buttons have a property border-width: 2px; and in the presence of this property, it turns out that pseudo-elements start to shrink, as they are child elements of the button. If you remove border and increase for example the width of the pseudo-elements will be able to see that everything works.

.basket__close {
 position: absolute;
 display: block;
 top: 17px;
 right: 10px;
 width: 23px;
 height: 23px;
 background-color: transparent;
 /* border: none; */
 outline: none;
 padding: 0px;
 margin: 0;
}

.basket__close::before, .basket__close::after {
 content: ";
 position: absolute;
 left: -webkit-calc(50% - 8px);
 left: calc(50% - 8px);
 width: 24px;
 height: 2px;
 background-color: #e74c3d;
}

Find more questions by tags HTMLCSS