How can I replace text with CSS?-第2页回答

How can I replace text with css using a method like this:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

Instead of ( img[src*="IKON.img"] ), I need to use something that can replace text instead.

I have to use [ ] to get it to work.

<div class="pvw-title">Facts</div>

I need to replace "Facts".

标签： css text replace

17条回答

素衣白纱

2楼-- · 2019-01-01 02:08

This isn't really possible without tricks. Here is a way that works by replacing the text with an image of text.

.pvw-title{
    text-indent:-9999px;
    background-image:url(text_image.png)
}

This type of thing is typically done with Javascript. Here is how it can be done with jQuery:

$('.pvw-title').text('new text');

0人赞添加讨论(0) 举报

人气声优

3楼-- · 2019-01-01 02:09

You can't, well, you can.

.pvw-title:after {
  content: "Test";
}

This will insert content after the current content of the element. It doesn't actually replace it, but you can choose for an empty div, and use CSS to add all the content.

But while you more or less can, you shouldn't. Actual content should be put in the document. The content property is mainly intended for small markup, like quotation marks around text that should appear quoted.

0人赞添加讨论(0) 举报

还给你的自由

4楼-- · 2019-01-01 02:12

I use this trick:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

I've even used this to handle internationalization of pages by just changing a base class...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

0人赞添加讨论(0) 举报

残风、尘缘若梦

5楼-- · 2019-01-01 02:14

Try using: before and: after. One inserts text after HTML is rendered, the other inserts before HTML is rendered. If you want to replace text, leave button content empty.

This example sets the button text according to the size of the screen width.

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  button:before {
    content: 'small screen';
  }
  @media screen and (min-width: 480px) {
    button:before {
      content: 'big screen';
    }
  }
</style>
<body>
  <button type="button">xxx</button>
  <button type="button"></button>
</body>

Button text:

1) with :before

big screenxxx

big screen

2) with :after

xxxbig screen

big screen

0人赞添加讨论(0) 举报

谁念西风独自凉

6楼-- · 2019-01-01 02:17

Obligatory: This is a hack: CSS isn't the right place to do this, but in some situations - eg, you have a third party library in an iframe that can only be customized by CSS - this kind of hack is the only option.

You can replace text through CSS. Let's replace a green button with 'hello' with a red button that says 'goodbye', using CSS. See http://jsfiddle.net/ZBj2m/274/ for a live demo:

Here's our green button:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

Now let's hide the original element, but add another block element afterwards:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

Note:

We explicitly need to mark this as a block element, 'after' elements are span by default
We need to compensate for the original element by adjusting the pseudo-element's position.
We must hide the original element and display the pseudo element using visibility. Note display: none on the original element doesn't work.

0人赞添加讨论(0) 举报

刘海飞了

7楼-- · 2019-01-01 02:17

Based on mikemaccana’s answer, this worked for me

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

§ Absolute positioning

an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.

0人赞添加讨论(0) 举报

How can I replace text with CSS?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间