Html SASS框中的字体大小不同？

我有一个用HTML和SASS制作的盒子。html如下所示：

<main>
 <ul>
     <li><span>1<br>£200</span></li>
</ul>
</main>

body{
 font-family: Avenir, Heveltica, sans-serif;
}  
ul {
  display: grid;
  grid-template-columns: repeat(5, 10vw);
  grid-template-rows: repeat(5, 10vw);
  justify-content: center;
  align-content: center;
  grid-gap: 1rem;
  min-height: 90vh;
  list-style: none;
  margin: 0 0 2vw;
  padding: 0;
  font-size: calc(2vw + 1px);
}
li {
  margin: 0;
  padding: 0;
  text-align: center;
  border: 4px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    margin-top: 0.4rem;
  }  
}

li span {
    /* this targets the whole span but just override it for the first line below */
    font-size: 20px;
}

li span:first-line {
    font-size: 30px;
}

---

但是，我希望第二行（在中断后）的字体大小与第一行不同！但是我不知道怎么做。谢谢你的帮助

因此，有一种方法可以将CSS中的第一行作为目标，以便将第二行作为目标，执行如下操作：

<main>
 <ul>
     <li><span>1<br>£200</span></li>
</ul>
</main>

body{
 font-family: Avenir, Heveltica, sans-serif;
}  
ul {
  display: grid;
  grid-template-columns: repeat(5, 10vw);
  grid-template-rows: repeat(5, 10vw);
  justify-content: center;
  align-content: center;
  grid-gap: 1rem;
  min-height: 90vh;
  list-style: none;
  margin: 0 0 2vw;
  padding: 0;
  font-size: calc(2vw + 1px);
}
li {
  margin: 0;
  padding: 0;
  text-align: center;
  border: 4px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    margin-top: 0.4rem;
  }  
}

li span {
    /* this targets the whole span but just override it for the first line below */
    font-size: 20px;
}

li span:first-line {
    font-size: 30px;
}

---

你能发布实际的HTML而不是一些文本吗？这对我们会有很大帮助。哇，那是个错误！