Both after and before pseudo is behind element , how to fix that??

Question

https://code.sololearn.com/WFuWCqGcWfJM/?ref=app

Answer 1

To bring the `::before` and `::after` pseudo-elements in front of the `.line` element, you can modify your CSS as follows:

```css
/* ... Your existing CSS ... */

.line {
position: relative; /* Set the position of the .line element to relative */
width: 80%;
height: 1rem;
background: red;
margin: 2rem;
}

.line::before {
content: "<";
padding: 2rem;
width: 2rem;
height: 2rem;
background-color: pink;
position: absolute; /* Set the position of ::before to absolute */
left: -2.5rem; /* Adjust the position as needed */
z-index: 1; /* Bring ::before in front of .line */
}

.line::after {
content: '>';
width: 2rem;
height: 2em;
padding: 2rem;
background: blue;
position: absolute; /* Set the position of ::after to absolute */
right: -2.5rem; /* Adjust the position as needed */
z-index: 1; /* Bring ::after in front of .line */
}

/* ... The rest of your CSS ... */
```

In the code above, the key changes are:

1. Setting `position: relative;` for the `.line` element. This allows the `::before` and `::after` pseudo-elements to be positioned relative to it.

2. Setting `position: absolute;` for both `::before` and `::after`. This makes them positioned absolutely within the `.line` element.

3. Adjusting the `left` and `right` properties for `::before` and `::after` respectively to control their positioning relative to the `.line` element.

4. Adding `z-index: 1;` to both pseudo-elements to ensure they are displayed in front of the `.line` element.

With these changes, the `::before` and `::after` pseudo-elements should appear in front of the `.line` element as intended. Adjust the `left` and `right` values to fine-tune their positions if needed.