英语自定义标签 <i:juzi><i:zhuyu>John Smith</i:zhuyu></i:juzi> 主语谓语宾语

效果

John Smith died in World War Two. John Smith killed three enemy soldiers.

<style>
      i:juzi {
        display: block;
        margin-bottom: 40px;
        font-size: 18px;
      }
      i:juzi i:zhuyu,
      i:juzi i:dongci,
      i:juzi i:weiyu,
      i:juzi i:binyu,
      i:juzi i:buyu,
      i:juzi i:biaoyu,
      i:juzi i:zhuangyu {
        font-size: 18px;
        border-bottom: 3px solid #004d61;
        text-align: center;
        padding: 0 5px;
        display: inline-block;
        position: relative;
        font-style: normal;
        color: #348498;
        height: 24px;
        min- 40px;
        margin-bottom: 35px;
        background-color: white;
      }

      i:juzi i:zhuyu::before,
      i:juzi i:dongci::before,
      i:juzi i:weiyu::before,
      i:juzi i:binyu::before,
      i:juzi i:buyu::before,
      i:juzi i:biaoyu::before,
      i:juzi i:zhuangyu::before {
        font-size: 14px;
        padding: 1px 6px;
        border: 0px solid;
        border-radius: 5px;
        position: absolute;
        top: 30px;
        text-align: center;
        left: calc(50% - 15px - 5px);
         28px;
        color: white;
      }

      i:zhuyu::before {
        content: "主语";
        background-color: #5bd1d7;
      }

      i:dongci::before {
        content: "动词";
        background-color: #4f4f97;
      }
      i:weiyu::before {
        content: "谓语";
        background-color: #4f4f97;
      }

      i:binyu::before {
        content: "宾语";
        background-color: #ff5f5f;
      }

      i:buyu::before {
        content: "补语";
        background-color: #ff7260;
      }
      i:biaoyu::before {
        content: "表语";
        background-color: #ff7260;
      }
      i:zhuangyu::before {
        content: "状语";
        background-color: #bd75c7;
      }
    </style>

用法

<i:juzi><i:zhuyu>John Smith</i:zhuyu> <i:dongci>died</i:dongci> <i:zhuangyu>in World War Two</i:zhuangyu>.</i:juzi>
<i:juzi>
  <i:zhuyu>John Smith</i:zhuyu>
  <i:dongci>killed</i:dongci>
  <i:binyu>three enemy soldiers</i:binyu>.
</i:juzi>