缩小第二个单词

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

您可以将°包裹在一个跨度中并减小其字体。就像

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

  $(".wthr").html(weather.temperature + "<span>&deg;</span>");
});

.wthr span {
  font-size: 50%;
  vertical-align: 7px;
}

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

已更新：根据@Sangram的建议进行编辑

Answer 2

您可以将°放在::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>

Answer 3

您可以尝试将°包裹在一个跨度中，并为其指定一个类或直接设置样式。

$(".wthr").html(weather.temperature +<span style="font-size:50;">"&deg;"</span>);