mirror of
https://github.com/SerenityOS/serenity.git
synced 2025-01-24 10:22:05 -05:00
40dea272d2
When a button should use flex for alignment and also has ::before and/or ::after, we previously did the following: 1. Prepended/appended the button's children with boxes for pseudo-elements. 2. Replaced the button's direct children with a flex container that contains its children. As a result, the generated boxes for ::before/::after ended up as children of the generated flex item, instead of being direct children of the button layout box as they were supposed to be. This change reverses these steps, ensuring that boxes for pseudo-elements are generated only after modifications inside the button layout are completed.
20 lines
No EOL
474 B
HTML
20 lines
No EOL
474 B
HTML
<!DOCTYPE html><style type="text/css">
|
|
button {
|
|
background-color: initial;
|
|
}
|
|
.button_button___eDCW {
|
|
font-size: 50px;
|
|
position: relative;
|
|
color: blueviolet;
|
|
}
|
|
.button_button___eDCW:after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: #d1ccb6;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style><button class="button_button___eDCW">See more games</button> |