simona6 Posted June 30, 2023 Share Posted June 30, 2023 .color-top-border-pink-green:before { background: linear-gradient(to right,#e0218a 17.85%,#bff010 53.28%,#96BD0C 100%); content: ""; height: 4px; width: 100%; display: block; } I'm trying to apply this gradient border at the top of a row. It works if the background is coloured or even if it has a Gradient Colour set in the row options. But it will not work if there is a background image assigned. I assumed that as a "before", it would simply place this literally, before the row, so it appears as a top border. I tried it on a row that has a background image set to contain, and to the right. And applied it "after", and it added it, but only up to the point where the background image began. Any ideas? Simon Quote Link to comment Share on other sites More sharing options...
kicken Posted June 30, 2023 Share Posted June 30, 2023 By row are you talking about a <tr> table row? What's the HTML that goes along with that CSS? Quote Link to comment Share on other sites More sharing options...
simona6 Posted June 30, 2023 Author Share Posted June 30, 2023 No just a simple DIV row. With a background-image assigned to it. Quote Link to comment Share on other sites More sharing options...
maxxd Posted June 30, 2023 Share Posted June 30, 2023 (edited) Works for me - what exactly are you seeing? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Testing before</title> <style> .color-top-border-pink-green:before { background: linear-gradient(to right,#e0218a 17.85%,#bff010 53.28%,#96BD0C 100%); content: ""; height: 4px; width: 100%; display: block; } .color-top-border-pink-green{ height: 350px; width: 99vw; background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80') center center no-repeat; } </style> </head> <body> <div class="color-top-border-pink-green"></div> </body> </html> Note that there is a small chance I'm breaking copyright rules with that background image - I honestly don't know. It comes from here: https://unsplash.com/photos/KMn4VEeEPR8 Edited June 30, 2023 by maxxd Quote Link to comment Share on other sites More sharing options...
simona6 Posted July 1, 2023 Author Share Posted July 1, 2023 This is the web page: https://www.79design.org.uk/ This is the second where, for this test, I am adding the top :before code. I think the background image is set within the DIV itself, rather than external Style. If you look at one of the upper rows you see the top bar working, as the DIV it is "before" has only a background color or gradient set. Quote Link to comment Share on other sites More sharing options...
kicken Posted July 1, 2023 Share Posted July 1, 2023 For the section of the page you're showing, the problem is that your background issue is absolutely positioned over top of the ::before element. You can work around this by adding to your style position: relative; z-index: 10; That will make the gradient show, but it won't be positioned correctly due to the padding on the parent element. You'll need to adjust that styling to get what you want, and probably other page styles. Quote Link to comment Share on other sites More sharing options...
simona6 Posted July 1, 2023 Author Share Posted July 1, 2023 Why does the parent padding cause the gradient to not appear at the top, if the :before tells it to place it... before? Quote Link to comment Share on other sites More sharing options...
kicken Posted July 1, 2023 Share Posted July 1, 2023 (edited) You might be misunderstanding what ::before does, or maybe my usage of parent. The selector ::before is a pseudo-element that is placed before the content of the selected element, not before the actual element. For example, the html: <div class="hello">World</div> With the CSS .hello::before { content: "Hello"; } Would be rendered as if you had written this HTML <div><span>Hello</span>World</div> The pseudo-element is a child of the selected element. As such, any padding on the selected (parent) element affects where the pseudo-element is rendered. Edited July 1, 2023 by kicken Quote Link to comment Share on other sites More sharing options...
simona6 Posted July 1, 2023 Author Share Posted July 1, 2023 Sorted. I applied positon: absolute, with top: 0, and index: 4 (so it goes over any color overlay, but not over any image that is 'overlapping'. But I assumed that applying it as ::before, means this comes immediately before that row - not "inside it"... Quote Link to comment Share on other sites More sharing options...
maxxd Posted July 1, 2023 Share Posted July 1, 2023 As kicken explained, ::before will come before the content inside the specified element, not before the specified element itself. ::after works the same way, only, you know - after the content of the specified element. Quote Link to comment Share on other sites More sharing options...
simona6 Posted July 2, 2023 Author Share Posted July 2, 2023 Oooo wow. By sheer logic I assumed ::before was before the item you select. Ie. Before ::title (inside the container), or ::before the inner DIV. So what code would you use to place it ::before the ACTUAL Div?? Unless I got it right with the Absolute positioning? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.