Before-Selector works properly?

[deeper]

Hi,
my theme creates automatically a link in the footer for mobile-user enabling to switch to the desktop view. Anchor is english ("Full Site") and as my users are not very web-savvy and not (native) english speaking I'd like to help them.

The link is wrapped in a paragraph and not customizable by any default-options of my theme. I'd like to change the anchor in German or adding a German title attribute or supplementing some explaining words before the anchor.

Always searching simple and reliable ways I started with trying to insert some explaining words directly before the anchor with the help of CSS and its before-selector.

a.footer-responsive-grid-link::before { 
 content: "Zur vollen PC-Ansicht wechseln: ";
 background-color: yellow;
 color: red;
}

It seems to work basically. The result:
Zur vollen PC-Ansicht: Full Site

However two things are strange:

-It works only by using the shortened class name "footer-responsive-grid-link". Actually it's "footer-responsive-grid-link footer-responsive-grid-disable footer-link".

-Inserted text "Zur..." becomes part of the link, not just plain text before the link. Now I have an anchor speaking two languages.

Is this unavoidable?

[rainborick]

You can chain class names in your CSS rules to select elements with specific multiple class names, as in:

.footer-responsive-grid-link.footer-responsive-grid-disable.footer-link::before

I can't explain the behavior of including the ::before content in the link, but I tested Firefox, Chrome, and IE and they all do the same thing, so it's not a one-browser bug. The best solution I can think of is to modify the footer file in your theme to enclose the <a></a> with a <span id="?"> tag so you can easily select it in your stylesheet.

[Paul_o_b]

The pseudo elements :before and :after place content before the "content" in that element and not before or after the element itself.

If you want content before the anchor itself you would need to target the parent of the anchor and assuming there was no other content in the way.

e.g.
<div class="test"><a href="#"... etc

Then .test:before would place content inside .test before any other content in that div.

The selector (.test) is the target and then content is inserted before the content in that target.

[deeper]

Thanks for both answers.

If you want content before the anchor itself you would need to target the parent of the anchor and assuming there was no other content in the way.

Not only the link, but also the paragraph wrapping it is created automatically. So I cannot place a class-name in this paragraph manually, but there is already one:

<p>...</p><p class="footer-responsive-grid-link-container footer-responsive-grid-link-enable-container"><a href="http://example.com/?full-site=false" rel="nofollow" class="footer-responsive-grid-link footer-responsive-grid-enable footer-link">View Full Site</a></p>

I tried this:
p.footer-responsive-grid-link-container::before {
content: "Zur vollen PC-Ansicht wechseln: ";
background-color: yellow;
color: red;
}

Hooray! This works.

Two little issues remain:

As the anchor changes automatically between "View Full Site" and "View Mobile Site" my inserted text must comprehend both, like "Zwischen Mobile- und PC-Ansicht wechseln"; that means "Change between mobile and PC". I think this is o.k.

In "Zur vollen PC-Ansicht wechseln: "
the empty space after colon is ignored on the frontend:
Zwischen Mobile- und PC-Ansicht wechseln:View Full Site"

[lucy24]

the empty space after colon is ignored on the frontend:

This is pretty much an inherent property of html. Multiple spaces are collapsed, while browsers may choose to ignore single spaces immediately before closing markup or immediately after opening markup. If you look at your final code you can probably work out what the browser thinks it's doing.

Try replacing the plain space with a nonbreaking space. Not &nbsp; (entities don't play nice in "content:" declarations) but the actual " " character. On the Mac it's option-space; on That Other Platform I suppose it's alt-window-control followed by a sequence of eleven numerals.*


* Kidding. Comprehensive keyboards have existed in Windows for, oh, several years now.

[deeper]

Alt + 0160 works on "that other platform" :).

What would you think about the following solution alternatively:

1. Hiding the link which is inserted automatically by "display none" and

2. Offering users the "same" link again, but inserted by myself manually (not by theme), like any normal link?

Btw, looking at the left side of your post, I finally understand now why the US love "stars and stripes". I'm "blinded by the light"... just kidding...always appreciate your big knowledge you share friendly and patiently.

[lucy24]

Hey, don't look at me. If I could pick my own avatar I'd use a picture of my cat.

If a nonbreaking space works, may as well leave it at that. But {display: none;} is a safe option if you can get it to work with an anchor. You have to conceal the bit before the linking text and the bit after, but not the bit in the middle. (The {display: none;} property doesn't toggle. Once display is off, it's off.) Couldn't you just say

{content: "";}

in your @media rule to override the previous longer content?

[deeper]

I'm not sure If I could explain my idea understandable. It should not be just an alternative for the space issue after colon, but for the whole mobile-link. My own link then could have a german anchor, so there is no need to insert any text before any more.

Obviously the functionality of this mobile-link is done mainly by the classes, so I must keep them:

<a href="http://example.com/?full-site=false" rel="nofollow" class="footer-responsive-grid-link footer-responsive-grid-enable footer-link">Wechsel Mobil- und PC-Ansicht</a>

But it doesn't work. After step 1 with

.block-type-footer a.footer-responsive-grid-link { display: none; }

and inserting my own normal link no link appears at all any more. I tried around but... I guess it's just my lack of CSS. "display none" also catches my own link, I guess.

Even if it worked, having the "same" link two times in my code, saying "yes" and "no" to it at the same time: it "smells" a little bit for troubles in future, after updates. May be the inserted text before the original link without touching it is a better way. Not a winner in terms of "elegance", but o.k.

[lucy24]

no link appears at all any more

Yes, that's what I meant about the particular problems with {display: none} in connection with an anchor. I think you'd instead have to go with {content: ""} to override any earlier "content" setting.

Now, if you're willing to go to javascript, this kind of thing is pretty straightforward (where "straightforward" means "I've done it myself"). You can then grab all elements of a particular class or type-- or do it by id if there's only one per page-- and add/remove/overwrite classnames, where each named class offers a different {content: }.

Changing the HTML to use different classnames is much, much easier than changing the CSS for a single class.

But that's only if you want to go the script route.

[deeper]

Thanks for input.

Have to think about it a bit.

One further thought: An additional link which exists unseen (display none) nevertheless takes space and must be considered in terms of layout and design.

[lucy24]

No, you're confusing {display: none} with {visibility: hidden}. Once an element is set to {display: none} [w3.org] it's as if the element and all its descendants simply didn't exist. In full (here from CSS2.1 docs, my added boldface):

This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

What {display: none} does take up is bandwidth. For example, if an element contains an enormous background-image, or contains an entire other page in an iframe, that content will still be loaded, regardless of {display} setting. But {visibility: hidden} is pretty much the same as {color: transparent} (property that didn't exist in CSS2 for foregrounds, but is in CSS3 and by this point pretty universally supported).