当前位置：文江博客话题详情

带有 css 的文本中的上标第一项

发布于 2024-11-03 18:18:58 字数 113 浏览 4 评论 0原文

我想用 css $50.00 为该文本的第一个字符添加上标，以便 $ 仅是文本其余部分高度的一半。

我怎样才能用CSS做到这一点？有什么方法可以选择一段文本中的第一个符号并用 css 将其上标吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

开始看清了 2024-11-10 18:18:58

span.price:before{ content:'
这将使：
<p>The current price is <span class="price">100.0</span></p>

变为：
The current price is $100.0

除了 $ 将成为上标。
 编辑：我再次测试了它，可以确认上述工作。然而，所有浏览器都不支持 css 中的 before 和 after。
否则，您可以使用像这样的 html 来实现：
<p>The current price is <sup class="price">lt;/sup>100.0</p>

 两种解决方案的概念标记证明：
<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="UTF-8"> 
    <title>Price test</title> 
    <style>
        span.price:before{ content:'
; font-size:xx-small; vertical-align:top; }

这将使：

变为：

除了 $ 将成为上标。
 编辑：我再次测试了它，可以确认上述工作。然而，所有浏览器都不支持 css 中的 before 和 after。
否则，您可以使用像这样的 html 来实现：

 两种解决方案的概念标记证明：

; font-size:xx-small; vertical-align:top; }
    </style>
</head> 
<body>
    <p>The price is <span class="price">100.0</span></p>
    <p>The price is <sup>lt;/sup>100.0</p>
</body></html>

; font-size:xx-small; vertical-align:top; }

这将使：

变为：

除了 $ 将成为上标。

编辑：我再次测试了它，可以确认上述工作。然而，所有浏览器都不支持 css 中的 before 和 after。

否则，您可以使用像这样的 html 来实现：

两种解决方案的概念标记证明：

span.price:before{ content:'
This will make: 
<p>The current price is <span class="price">100.0</span></p>

Into:
The current price is $100.0

Except that $ will be superscript. 
Edit: I tested it again and can confirm the above works. However all browser does not support before and after in css. 
Otherwise you could just do it with html like this: 
<p>The current price is <sup class="price">lt;/sup>100.0</p>

Proof of concept markup for both solutions:
<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="UTF-8"> 
    <title>Price test</title> 
    <style>
        span.price:before{ content:'
; font-size:xx-small; vertical-align:top; }

This will make: 

Into:

Except that $ will be superscript. 
Edit: I tested it again and can confirm the above works. However all browser does not support before and after in css. 
Otherwise you could just do it with html like this: 

Proof of concept markup for both solutions:

; font-size:xx-small; vertical-align:top; }
    </style>
</head> 
<body>
    <p>The price is <span class="price">100.0</span></p>
    <p>The price is <sup>lt;/sup>100.0</p>
</body></html>