Is it possible to only target content between ::before and ::after when using CSS?

Question

I do not have access to the JavaScript or HTML, only the CSS.

I am trying to change the text that is already there, to something else.

#element::before {
  content: "This is the new text."
}

<div id="element">This is the original text.</div>

Is it possible to target the old text specifically with CSS, to then maybe apply text-indent: -9999px;?

This is a bad idea. You should not be using the `content` property to actually **change** content. It's terrible for SEO purposes. CSS is for **styling** not actual content. — Paulie_D, Oct 30 '14 at 11:32
@Paulie_D Is there an alternative you can suggest? I only have CSS to use. My true reason is to remove a couple brackets, so SEO will not be an issue for what I need it for. Main point is, how do I style content only between ::before and ::after? — ckhatton, Oct 30 '14 at 11:41
Is it actually a bare text node not wrapped in a proper text tag such as suggested by your code? — Paulie_D, Oct 30 '14 at 11:48
Yea, `
Item(s) will be shipped to your billing address.
` taken from one of the Shopify checkout pages (I am changing the text because the chosen font uses a different character for the brackets) — ckhatton, Oct 30 '14 at 12:17

score 4 · Accepted Answer · edited May 23 '17 at 12:20

4

It is not possible to specifically target the text node of an element; see Is there a CSS selector for text nodes? for more information.

You could achieve the effect you are after in a variety of ways, although as Paulie_D suggests, whether this is a good idea depends on what you are trying to achieve.

#element {
    visibility: hidden;
}
#element:before {
    content:"My new text using visibilty.";
    visibility: visible;
}
#element2 {
    font-size: 0;
}
#element2:before {
    content:"My new text using font-size.";
    font-size: 16px;
}

<div id="element">This is the original text.</div>
<div id="element2">This is the original text.</div>

edited May 23 '17 at 12:20

Community

1
1

answered Oct 30 '14 at 11:45

Hidden Hobbes

13,893
3
38
64

2

The visibility approach may be the best option because using a font-size of 0 may be suspect from an SEO point of view. – Marc Audet Oct 30 '14 at 11:49
I found using the visibility approach meant that I had to also apply all previous styles to the `::before` or `::after` property, and also it displays as ‘inline’, and not ‘block’. The `font-size: 0;` approach works well, but still retains the space where the text would be; I found restricting the block height helped – ckhatton Nov 02 '14 at 21:52

score 2 · Answer 2 · edited May 23 '17 at 12:27

The short answer is: no, you cannot use CSS to target the text within the element independently of the content of the pseudo elements.

However, you can create a work around by pasting the content of the pseudo element over the original content and thus hide it.

Note: This approach uses absolute positioning so it may created issues if the pseudo-element content is excessively long.

Better Approach: An alternative approach is to use the visibility property to hide the main content of the element but make visible the content from the pseudo-elements (credit to Hidden-Hobbes).

#element::before {
  content: "My new text.";
  display: block;
  color: black;
  position: absolute;
  background-color: yellow;
  width: 100%;
}
#element {
  color: red;
  position: relative;
}
#element-alt::before {
  content: "My new alt-text.";
  border: 1px dotted blue;
  visibility: visible;
  display: block;
}
#element-alt {
  border: 1px dotted gray;
  margin-top: 30px;
  visibility: hidden;
}

<div id="element">This is the original text.</div>
<div id="element-alt">This is the original text.</div>

Is it possible to only target content between ::before and ::after when using CSS?

2 Answers2