How can I replace text with CSS

Question

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    lt div class  pvw-title  gt Facts lt  div gt   I need to replace  Facts

User · Answer

I had an issue where I had to replace the text of link, but I couldn't use JavaScript nor could I directly change the text of a hyperlink as it was compiled down from XML. Also, I couldn't use pseudo elements, or they didn't seem to work when I had tried them.

Basically, I put the text I wanted into a span and put the anchor tag underneath it and wrapped both in a div. I basically moved the anchor tag up via CSS and then made the font transparent. Now when you hover over the span, it "acts" like a link. A really hacky way of doing this, but this is how you can have a link with different text...

This is a fiddle of how I got around this issue

My HTML

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

My CSS

 div.field a {
     color: transparent;
     position: absolute;
     top:1%;
 }
 div.field span {
     display: inline-block;
 }

The CSS will need to change based off your requirements, but this is a general way of doing what you are asking.

User · Answer

Try using  before and  after  One inserts text after HTML is rendered  and 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    lt meta name  viewport  content  width device-width  initial-scale 1  gt    lt style gt    button before       content   small screen          media screen and  min-width  480px        button before         content   big screen              lt  style gt   lt body gt     lt button type  button  gt xxx lt  button gt     lt button type  button  gt  lt  button gt   lt  body gt    Button text    With  before  big screenxxx  big screen With  after  xxxbig screen  big screen

User · Answer

The simplest way I found is by making the element font-size  0px  then overwrite it with any font size when creating  after pseudo  Example below   pvw-title        font-size 0px      pvw-title after           content   quot Hello quot           font-size 15px  important

User · Answer

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

User · Answer

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 that has the word  hello  with a red button that has the word  goodbye   using CSS  Before   After   See http   jsfiddle net ZBj2m 274  for a live demo  Here s our green button   lt button gt Hello lt  button gt   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 inline 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

User · Answer

The way to make this work is to add line-height to the CSS content  This will make the block to be seen above the hidden  thus this will not hide the changed text   Example with use before    pvw-title span     display  none      pvw-title before     content   Whatever it is you want to add     line-height  1 5em

User · Answer

Unlike what I see in every single other answer  you don t need to use pseudo elements in order to replace the content of a tag with an image   lt div class  pvw-title  gt Facts lt  div gt       div pvw-title      No  after or  before required            content  url  your URL here

User · Answer

This implements a checkbox as a button which shows either Yes or No depending on its  checked  state   So it demonstrates one way of replacing text using CSS without having to write any code   It will still behave like a checkbox as far as returning  or not returning  a POST value  but from a display point of view it looks like a toggle button   The colours may not be to your liking  they re only there to illustrate a point   The HTML is    lt input type  checkbox  class  yesno  id  testcb    gt  lt label for  testcb  gt  lt span gt  lt  span gt  lt  label gt       and the CSS is      ---------------------------------       Make the checkbox non-displayable       ---------------------------------    input type  checkbox   yesno       display none       ---------------------------------       Set the associated label  lt span gt          the way you want it to look             ---------------------------------    input type  checkbox   yesno label span       display inline-block      width 80px      height 30px      text-align center      vertical-align middle      color  800000      background-color white      border-style solid      border-width 1px      border-color black      cursor pointer       ---------------------------------       By default the content after the        the label  lt span gt  is  No                 ---------------------------------    input type  checkbox   yesno label span after       content  No        ---------------------------------       When the box is checked the             content after the label  lt span gt           is  Yes   which replaces any            existing content                        When the box becomes unchecked the      content reverts to the way it was       ---------------------------------    input type  checkbox   yesno checked label span after       content  Yes        ---------------------------------       When the box is checked the             label  lt span gt  looks like this             which replaces any existing            When the box becomes unchecked the      layout reverts to the way it was        ---------------------------------    input type  checkbox   yesno checked label span       color green      background-color  C8C8C8      I ve only tried it on Firefox  but it s standard CSS so it ought to work elsewhere

User · Answer

Using a pseudo element  this method doesn t require knowledge of the original element and doesn t require any additional markup    someElement      color  transparent     You may need to change this color        position  relative     someElement after      Or use  before if that tickles your fancy        content   New text       color  initial      position  absolute      top  0      left  0

User · Answer

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

User · Answer

After eight years  I faced the same challenge when trying to use the Stylish browser extension to change something on a website  not mine   And this time I made it work by looking at the source code using  inspect element  and created the CSS code based on that   This it what it looked like before    x000D   x000D   lt table gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td role  gridcell  gt  x000D           lt span title  In progress  style  background-color   e2047a color White margin 2px border-radius 2px padding-left  2px  padding-right  2px text-align  center width  45px  display  block overflow  hidden text-overflow  ellipsis   gt In progress lt  span gt  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    This is the same piece of the HTML and the CSS I used to modify the style    x000D   x000D  td span style  background-color   e2047a color White margin 2px border-radius 2px padding-left  2px  padding-right  2px text-align  center width  45px  display  block overflow  hidden text-overflow  ellipsis      x000D    width  100px important  x000D    x000D   lt table gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td role  gridcell  gt  x000D           lt span title  In progress  style  background-color   e2047a color White margin 2px border-radius 2px padding-left  2px  padding-right  2px text-align  center width  45px  display  block overflow  hidden text-overflow  ellipsis   gt In progress lt  span gt  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    You can run the code above and you will see that it works  tested in Chrome      This is simply what I wanted back in the days when I asked this question   I was using some sort of community blog Myspace similar stuff and the only thing you had when styling your profile was their CSS editor  and that s why I wanted to select it based on the style   I found the answer here    Advanced CSS Selector - Select based on styling CSS selector by inline style attribute

User · Answer

Well  as many said this is a hack  However  I d like to add more up-to-date hack  which takes an advantage of flexbox and rem  i e    You don t want to manually position this text to be changed  that s why you d like to take an advantage of flexbox You don t want to use padding and or margin to the text explicitly using px  which for different screen sizes on different devices and browsers might give different output   Here s the solution  in short flexbox makes sure that it s automatically positioned perfectly and rem is more standardized  and automated  alternative for pixels   CodeSandbox with code below and output in a form of a screenshot  do please read a note below the code   h1     background-color  green    color  black    text-align  center    visibility  hidden    h1 after     background-color  silver    color  yellow    content   This is my great text AFTER     display  flex    justify-content  center    margin-top  -2 3rem    visibility  visible    h1 before     color  blue    content   However  this is a longer text to show this example BEFORE     display  flex    justify-content  center    margin-bottom  -2 3rem    visibility  visible      Note  for different tags you might need different values of rem  this one has been justified for h1 and only on large screens  However with  media you could easily extend this to mobile devices

User · Answer

This is simple  short  and effective  No additional HTML is necessary    pvw-title   color  transparent      pvw-title after           content   New Text To Replace Old           color  black     set color to original text color            margin-left  -30px             margin-left equals length of text we re replacing            I had to do this for replacing link text  other than home  for WooCommerce breadcrumbs  Sass Less  body woocommerce  woocommerce-breadcrumb  gt  a href    shop          color  transparent       amp  after           content   Store           color  grey          margin-left  -30px            CSS  body woocommerce  woocommerce-breadcrumb  gt  a href    shop          color  transparent     body woocommerce  woocommerce-breadcrumb  gt  a href    shop    amp  after       content   Store       color   child-color-grey      margin-left  -30px

User · Answer

Based on mikemaccana   s answer  this worked for me  button     position  absolute    visibility  hidden     button before     content   goodbye     visibility  visible       sect  Absolute positioning     an element that is positioned absolutely is taken out of the flow and thus    takes up no space when placing other elements

User · Answer

Text replacement with pseudo-elements and CSS visibility HTML  lt p class  quot replaced quot  gt Original Text lt  p gt   CSS  replaced       visibility  hidden      position  relative      replaced after       visibility  visible      position  absolute      top  0      left  0      content   quot This text replaces the original  quot

User · Answer

Example  lt  DOCTYPE html gt   lt html gt    lt head gt       lt title gt Devnote lt  title gt       lt style gt           replacedValue                visibility  hidden               position  relative                       replacedValue after                visibility  visible               position  absolute               top  0               left  0               content   quot Devnote is developer answer solve  devnote in quot                    lt  style gt    lt  head gt   lt body gt        lt p class  quot replacedValue quot  gt Old Text Here lt  p gt   lt  body gt    lt  html gt   Output Devnote is developer answer solve  devnote in

User · Answer

I had better luck setting the font-size  0 of the outer element  and the font-size of the  after selector to whatever I needed

User · Answer

Or maybe you could wrap  Facts  round a  lt span gt  as follows   x000D   x000D   pvw-title span     display  none     pvw-title after     content   whatever it is you want to add     x000D   lt div class  pvw-title  gt  lt span gt Facts lt  span gt  lt  div gt  x000D   x000D   x000D

User · Answer

This worked for me with inline text  It was tested in Firefox  Safari  Chrome  and Opera    lt p gt Lorem ipsum dolor sit amet  consectetur  lt span gt Some Text lt  span gt  adipiscing elit  lt  p gt   span       visibility  hidden      word-spacing  -999px      letter-spacing  -999px     span after       content   goodbye       visibility  visible      word-spacing  normal      letter-spacing  normal

User · Answer

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

User · Answer

If you re willing to use pseudo elements and let them insert content  you can do the following  It doesn t assume knowledge of the original element and doesn t require additional markup    element     text-indent  -9999px    line-height  0     Collapse the original line        element  after     content   New text     text-indent  0    display  block    line-height  initial     New content takes up original line height        JSFiddle Example

User · Answer

I found a solution like this where a word   Dark   would be shortened to just  D  on a smaller screen width  Basically you just make the font size of the original content 0 and have the shortened form as a pseudo element   In this example the change happens on hover instead    x000D   x000D  span   x000D    font-size  12px  x000D    x000D   x000D  span after   x000D    display  none  x000D    font-size  12px  x000D    content   D   x000D    color  red  x000D    x000D   x000D  span hover   x000D    font-size  0px  x000D    x000D   x000D  span hover after   x000D    display  inline  x000D    x000D   lt span gt Dark lt  span gt  x000D   x000D   x000D

User · Answer

If you just want to show different texts or images  keep the tag empty and write your content in multiple data attributes like that  lt span data-text1  Hello  data-text2  Bye  gt  lt  span gt   Display them with one of the pseudo classes  before  content  attr data-text1    Now you have a bunch of different ways to switch between them  I used them in combination with media queries for a responsive design approach to change the names of my navigation to icons   jsfiddle demonstration and examples  It may not perfectly answer the question  but it satisfied my needs and maybe others too

[css] How can I replace text with CSS?

Examples related to css

Examples related to text

Examples related to replace