I'd like to subscript some of the text below. (vertical-alian?)

Asked 2 weeks ago, Updated 2 weeks ago, 2 views

Hi. I'd like to subscript some of the text below.

When I searched to find out the method, I applied it because I thought there was a method called vertical-align

It doesn't apply. I didn't get an error when I checked with the console. I don't know how to modify it, so I upload it here.

Right below is the html file.

    <span class="aa">66</span>
        <div class="bb"> </div>
        <span class="typed-text"></span><span class="cursor"> &nbsp; </span>
        <div class="bb"> </div>
      <span class="cc">99</span>

Below is the css file code.

It's about writing and erasing through the cursor between 66 and 99.

Question: The purpose of the modification is I want 99 to be the subscript below. (Or is there a way to control it in more detail?) 66 and 99 in quotation marks. I'd like to adjust the position of the circle of letters.)

I also hung a link. https://github.com/HinnnaHinnna/test_sp

Thank you always.

2022-09-20 10:19

1 Answers

vertical-align is a property that all CSS basic courses on the market teach, but it is rarely used in practice. Because the situation and way of writing are very limited. That's not the case for you.

To do what you want, you usually watch the show with :before, :after similar selectors and position: relative;. Please read the code first

.quoted:before {
  content: '66';
  position: relative;
  bottom: 0.25em;
  padding-right: 0.125em;
.quoted:after {
  content: '99';
  position: relative;
  bottom: -0.25em;
  padding-left: 0.125em;

When you're done, open the demo and see if this is what you wanted to do.

PS. It is not desirable to use the numbers 66 and 99 to express heavy quotes. " is clearly a symbol, but 66 is analyzed as the body of the document (content). (So, for example, the Google search engine later misunderstands it as "a document that uses 66 a lot."Or, content readers for the blind say 66 too often.) Please replace it with a suitable Unicode character or change the font.

2022-09-20 10:19

If you have any answers or tips

© 2022 pinfo. All rights reserved.