javascript - 缩小第二个字

Question

我想知道如何让 ° 变小，这是我尝试过的:

$(function() {
  var weather = {};
  weather.temperature = '24';

  $(".wthr").html(weather.temperature + "°");
});

.wthr::last-word {
  font-size: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clock wthr anim04c"><span></span></li>

但是它不起作用，我怎样才能使°变小？

Answer 1

您可以将 ° 放在 ::after 中并为其指定所需的字体大小:

$(".wthr").html("10");

.wthr::after {
  font-size: 60%;
  content: "°";
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clock wthr anim04c"><span class="temp"></span></li>

如果你并不总是需要.wthr上的度数符号，那么你也可以在.wthr上添加一个类:

$(".wthr")
  .html("10")
  .addClass('deg');

.deg::after {
  font-size: 60%;
  content: "°";
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clock wthr anim04c"><span class="temp"></span></li>