英文小说，添加中文注释的方法

一、CSS实现方法

效果：

CSS

 p strong {
    position: relative; 
      display: inline-block;   
    background-color: #e0fDD3; 
    border-radius: 3px; 
  
}

p strong::before {
    content: attr(data-explanation);
     position: absolute; 

    top: -1.1em; 
     left: 50%;  
      transform: translateX(-50%);   
    font-size: 0.8em; 
    color: #9900ff;
    white-space: nowrap;


}
 

HTML

                <p>OLIVER, BEING <strong  data-explanation="(刺激)">GOADED</strong> BY THE TAUNTS OF NOAH, ROUSES INTO ACTION, AND RATHER ASTONISHES HIM </p>
                <p>The month's trial over, Oliver was formally apprenticed. It was a nice sickly season just at this time. In <strong  data-explanation="(贸易的；商业的；赢利的；以获利为目的的)">commercial</strong> phrase, coffins were looking up; and, in the course of a few weeks, Oliver acquired a great deal of experience. </p>

二、借助软件，自动实现方法

1）、下载有声小说书屋软件 最新版（4.7以上版本）

导入英文小说

2）、右键，选择生成英文加注释选项

3、生成后，会自动打开英文小说本地网址

4、打开即可发现，英文添加了中文注释，方便听读学习

5、edge浏览器 右键大声朗读，即可听读看两不误