怎么实现字体悬浮的效果?就像这个图片里的优惠一样:
发布网友
发布时间：2022-04-24 09:33
共4个回答
热心网友
时间：2022-06-18 12:41
<span style="font-size:14px;color:#000;margin-top: 10px;">正常文字</span>
<span style="font-size:8px;color:Red;vertical-align: top;">漂浮文字</span>
</p>
<p style="height: 30px;width:200px;">
<span style="font-size:14px;color:#000;margin-top: 10px;">正常文字</span>
<span style="font-size:8px;color:Red;vertical-align: top;">漂浮文字</span>
</p>
我这种方法不怎么灵活了，呵呵！
55starting的方法不错，以前见过这种代码，不过还没碰到过这种效果，没注意。
这下，知道了伪元素的用法了。
追问嗯，不过你这个操作起来到方便简单，我容易懂，但是不会闪~~
热心网友
时间：2022-06-18 12:41
content: url(images/square_gray.gif); 这里是图片的路径
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>myFocus v1.0</title>
<style type="text/css">
.p1,.p2{
margin:5px;
}
.p1:after,.p2:after{
content:' 优惠 ';
font-size:12px;
color:#f00;
display:inline-block;
vertical-align:8px;
}
</style>
</head>
<BODY>
<p class="p1">七星台球俱乐部</p>
<p class="p2">巧克台球会所</p>
</BODY>
</html>追问优惠是图片，不用JS也可以实现这样的效果吗？我只会用CSS
追答图片也可以，conten值换成这个 content: url(images/square_gray.gif); 这里是图片的路径
热心网友
时间：2022-06-18 12:42
热心网友
时间：2022-06-18 12:42
