Jump to content

CSS for superscript

Recommended Posts

  • Replies 13
  • Views 74
  • Created
  • Last Reply

Top Posters In This Topic

@Michelle777 Hi! We need to be able to target the text to add the superscript with CSS. An easier way would be to italicize all the words that need to have a superscript and then target those words with CSS to add the superscript.

Can you consider making only the words with superscript italic and not any other words on the website?

If not, we'd have to target a block where the word with superscript exists. However, that would require adding code every time you want to add a word with superscript.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Michelle777 It won't be possible to target the word by setting the font as 'Miscellaneous'. If it's only a single word (set to bold or italic) within a sentence, I can target it to add the superscript with custom code. Basically, it will have to be a uniquely identifiable word (by setting it to bold or italic) within a sentence.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Hi Lesum

Ok got it, thank you!  

In which case, please could you give me the code for the second option you suggested, 'to target a block where the word with superscript exists. However, that would require adding code every time you want to add a word with superscript.'

It's just this symbol that I need to target in a block: ®

Thank you!

Michelle 

Link to comment

@Michelle777 Apologies, I intended to emphasize the entire word with bold or italic formatting, not superscript. Don't add the superscript. It will be automatically added through code once you apply bold or italic styling to a word.

Try the following code:

#block-yui_3_17_2_1_1718121383870_179906, #block-5666e0eb07f771d26e56 {
  strong:after {
  content: "®";
  vertical-align: super !important;
  font-size: 60%;
  font-weight: 400 !important;
  }
}

#block-b165f5896ddf9013e02b {
  em:after {
  content: "®";
  vertical-align: super !important;
  font-size: 60%;
  font-weight: 400 !important;
  }
}

First block of code is for bold words within the first section. Second block of code is for the italic words within the second section. 

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Michelle777 Great! Unfortunately, we only have bold or italic options. In the code, simply include the block ID where the text with superscript is located. I assume you'd like the font of the word with superscript to match the rest of the words in the sentence.

Here's the updated code to keep the font same:

// bold words with superscript
#block-yui_3_17_2_1_1718121383870_179906, #block-5666e0eb07f771d26e56 {
  strong {
  font-weight: 400 !important;
  }
  strong:after {
  content: "®";
  vertical-align: super !important;
  font-size: 60%;
  font-weight: 400 !important;
  }
}

// italic words with superscript
#block-b165f5896ddf9013e02b {
  em {
  font-style: normal !important;
  }
  em:after {
  content: "®";
  vertical-align: super !important;
  font-size: 60%;
  font-style: normal !important;
  }
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.