英语自定义标签 <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-width: 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);
        width: 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>