Encountering a puzzling CSS challenge... I am trying to enhance the appearance of an element by adding visual thickness. This task is usually straightforward, using an :after pseudo-element with absolute positioning within a parent that has relative positioning. However, despite adjusting z-index values and positioning, the pseudo-element remains hidden beneath the text of its parent element's content rather than displaying on top as expected.
You can view the issue on this page: . Look for the violet "Combine and Publish" button at the end of the page, which should exhibit the desired thickness when implemented correctly.
For a demonstration, refer to this example: http://jsfiddle.net/sugardaddy/vq2x2uue/
HTML
<a href="#" class="ctabutton ctabutton-primary ctabutton-standard "><i class="ft-webicons-coffee"></i>Read Jane’s story</a>
CSS
.ctabutton-primary::after {
background-color: #521a4a;
}
.ctabutton::after {
border-radius: 0.4em;
bottom: -3px;
content: "";
height: 20px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
.ctabutton-primary, .ctabutton-primary:hover {
background-color: #852a79;
color: #ffbb1a !important;
}
.ctabutton, .newsform .mktoForm .mktoButtonWrap.mktoRound .mktoButton {
border-radius: 0.3em;
display: inline-block;
font-weight: 400;
padding: 0.5em 1em;
position: relative;
transition: all 200ms ease-in-out 0s;
vertical-align: middle;
}
Any assistance would be greatly appreciated!
UPDATE: Upon further investigation, it seems that applying a negative z-index to the pseudo-element causes it to disappear only in specific areas of the page, while working perfectly for buttons within menus. This may suggest conflicts with z-index rules applied to parent elements, though the exact cause remains unclear.
UPDATE 2: It appears that the issue may stem from nested relative elements affecting z-index inheritance. By setting each level with z-index:inherit, the pseudo-element becomes visible. However, observation suggests that it is only visible when the first-level parent lacks a background color (such as the beige one). Investigation continues...