Pseudo Selector Solution?

I feel silly for asking this, but I'm currently trying to target something on a social site that allows custom code. I've been able to figure most things out. But I'm currently struggling to find a possible solution. On the site, in one section the header has words wrapped around a link. If I use ::before, the whole thing changes. If I use :not() I can't exclude the href present. Thought maybe I'm using it wrong with this current attempt. The html essentially looks like such...
<div class="divname">
<h4>"word are here[" == $0
<a href="link">link title</a>
"]"
</h4>
<p></p>
</div>
<div class="divname">
<h4>"word are here[" == $0
<a href="link">link title</a>
"]"
</h4>
<p></p>
</div>
Is there a way to target just the sentence before the link or way to exclude the link? I want to change the before and essentially keep the link and the after if possible Quick edit: The site does not allow for Java, so I'm limited to pure CSS.
M
MarkBoots17d ago
what css properties do you want to change? It depends because some will cascade down (such as font, color etc) *:has(>a) will select the <h4> but because that is the parent of <a> some properties you change on the h4 will affect the link as well otherwise, there always is javascript
T
TheJoshShephard17d ago
Hey @MarkBoots thanks for responding! I'm mainly looking for a way to replace the content. That way if says "Latest Projects [view]" for example, I wanna change it to "New Post" [view]. So I need to target the words before the <a>, but :not(a) doesn't work, I've also tried :not([href]) and :not(href) assuming that works. Also I should have clarified previously in the post. The site does not allow javascript. So everything I do is purely CSS based Thanks!
M
MarkBoots17d ago
replacing the text with css only is not possible
T
TheJoshShephard17d ago
Noted. It's just on the site, what I've been doing is the following
.divname h4{
text-indent: -9999px;
line-height: 0;
display: flex;
flex-direction: column-reverse;
flex-wrap: nowrap;
gap: 7px;
}
.divname h4::before{
content: "New Title Here";
text-indent: 0;
display: block;
line-height: 1.9em;
}
.divname h4{
text-indent: -9999px;
line-height: 0;
display: flex;
flex-direction: column-reverse;
flex-wrap: nowrap;
gap: 7px;
}
.divname h4::before{
content: "New Title Here";
text-indent: 0;
display: block;
line-height: 1.9em;
}
So that's why I'm trying to figure how to target whats before <a>, that way I can alter and replace it like such. Which has worked on every part except the section I'm currently working on
M
MarkBoots17d ago
as the text is not wrapped seperatly, i don't think there is a way. but will try and think about it
T
TheJoshShephard17d ago
Yeah I had a feeling that might be an issue. So I assume I would likely just have to re enter the full thing with the link included. But if there is a way, that would be awesome!
C
ChooKing17d ago
Since you have to use JS to replace text. Do the whole thing in JS.
const text = document.querySelector(".divname a").previousSibling;
text.textContent = "something else"
const text = document.querySelector(".divname a").previousSibling;
text.textContent = "something else"
M
MarkBoots17d ago
maybe i have something. --edit: deleted the pen, see screenshot below
T
TheJoshShephard17d ago
Hey Choo, thanks for the response, unfortunately on the site. I'm limited to pure CSS. I'll make an edit to my post real quick. Because I did mention it once earlier! WOW! That was quick! I'll give it a shot, one moment. Thanks, Mark! So that almost works, I think I just need to trouble shoot it a little or figure how I can adjust it with my current code. Thanks again, Mark! I'll get back to you if I figure it out!
M
MarkBoots17d ago
no problem, good luck
T
TheJoshShephard17d ago
Hey Mark, So I just played around with stuff again, and I think unfortunately that work. It looks like I'll just have to skip preserving the link all together. Which is still fine I guess. I still appreciate you attempting to help find a solution. Still gave me some insight on how else to approach things!
M
MarkBoots17d ago
for future reference (deleted the pen)
No description
T
TheJoshShephard17d ago
I greatly appreciate it! I'll save the screenshot for future reference! Thanks again for everything!
Want results from more Discord servers?
Add your server
More Posts
Carousel-style pagination with Modals.Hello everyone! I saw this site https://lk.zont-online.ru/demo#/. When you click the first card, youImg or Svg element?Say you have a Figma where the designer have created icons and such. Do you prefer to export them toElement for <slot>?Is it possible to not pass a wrapper element to a `<slot />`? It looks like I have to use a wrapper overflow while body does not have an heightwhy i am facing overflow problem but when i give body height of 100vh the overflow goes awayDoing responsive text by using media queries on :root to change the font size for smaller screens.While trying to figure out a good way to do responsive text without manually setting font size usingHow to fix this snap dynamic horizontall scroll effect?I'm trying to make an effect where you firstly scroll verticall, then when reaching a certain point Issue with Making Child Div Inherit Height from Parent <td> without js or absolute positning.I'm facing a problem with making a child div (.auto-box) inherit the height of its parent <td> in HTColor pngMy restraints are kind of weird, but I have game file icons that I want to port to the browser. Its How do i design something like thisI am trying to design this just using div and inside this div ( span ) how can i get the same resultquotes within html attributehow does the browser know which quote ends the attribute value?Card positioning inside a grid container, we want the price and buttons to be the same for each cardhttps://github.com/callum-laing/shopping-site/tree/main/app As you can see in the image, the buttonTrying to align every card so that the button?in before someone mentions the unfinished title. https://github.com/callum-laing/shopping-site/treeTailwind helpI use Tailwind and would like to display the 2 Li elements next to each other with a small distance What's a modern simple logical layout I can use for the main logo?I'm working on a website for my dads business and I just want to keep it really clean and modern. ThHelp with side navigation/sidebarI’m new to JavaScript and I’ve been working on personal projects trying to improve my skills. Couldbackground scrolling when menu is openHello, does anybody know, how to stop background scrolling when you open side menu? I've tried overfescaping the wrapperHey, is there a way to escape a wrapper on one side without using grid? I'm aware Kevin has made a vSome serious problems with my CSSSo, I have started building a site and I have got as far as the navigation, when I made it a few dayScroll Shadow in CSSWhen I scroll the white shadow is coming from below. How to make this with CSS. https://www.harpersOverflow-y: auto makes x-axis scrollbar appearHi folks, I have a react Sidebar component with scss styles. The sidebar has the main list 'sidebar_