利用CSS隐藏HTML元素并插入替代内容

在创建一个支持切换阅读模式和答题模式的Anki问答题模板中，我创建了一个支持切换阅读模式和答题模式的问答题模板，该文最终利用JavaScript将Anki输出的向下箭头删除，并插入自定义的提示语。经过进一步测试，发现实现上述功能完全不需要使用JavaScript，仅使用CSS即可以实现。

Anki产生向下箭头的那行代码如下：

format!("{provided}
↓
{expected}")

从上面的模板字符串可知向下箭头所在span元素的id为typearrow，在这个元素后面跟着一个br元素，后面紧接着输出的内容是用户输入的答案存在的错误，可以通过继续查阅源代码搞清楚这些内容包含在什么HTML元素中，也可以在背面内容模板中插入以下JavaScript让系统提示：

var typearrow = document.getElementById('typearrow');
alert(typearrow.nextSibling.nextSibling.tagName);

运行上述代码可知br元素后面紧跟着的是span元素。不过，在CSS选择器中，可以用“+”定位到紧邻的兄弟结点，也可以用“*”通配符匹配任何HTML节点，因此，如果我们只想在br元素后面紧跟着的元素前面添加提示，实际上无需搞清楚用户输入的答案存在的错误包含在哪个元素中，只需用CSS选择器“#typearrow + br + *”就可以定位到那个元素，再加上伪元素选择器“::before”，就可以插入提示信息了。

利用上面的思路改造可切换答题模式与阅读模式的问答题模板后，从下面的源代码可以看出，正面内容模板和背面内容模板都更为简洁，特别是背面内容模板，其中的JavaScript代码完全删除了，理论上运行效率也更高。

正面内容模板：

说明：当前模式如下方按钮所示。点击下方按钮可在阅读模式和答题模式之间切换。





	⛳问题	
		
	

{{edit:问题}}



	
	👉	口诀
	
	{{edit:口诀}}




	✍️	回答


	{{type:答案}} 	
	




	
		👍正确答案	
	
	{{edit:答案}}

	

	
		⚓备注
	
	{{edit:备注}}

背面内容模板：

	⛳	问题
		
	

{{edit:问题}}



	
	👉	口诀
	
	{{edit:口诀}}



	
	👉答案对比
	说明：没有另外显示正确答案时表示你的答案完全正确。
	
	{{FrontSide:type:答案}}



	⚓备注

{{edit:备注}}

样式文件只贴出在Anki自带的问答题模板基础上后来添加的内容，其中值得注意的地方均有注释注明：

.color1,q{
	font-weight:bold;
	color:red;
}
.color2,a,a:link,a:visited,a:hover,a:active{
	font-weight:bold;
	color:blue;
	text-decoration:none;
}
.color3,i{
	font-weight:bold;
	color:rgb(230,12,237);
}
.separator{
	border:none;
	border-top-width:0.3em;
	border-top-style:solid;
	border-top-color:#aaa;
	margin:1.2em 0 1.2em 0;
}
.normal{
	text-indent:2em;
	font: 22px/22px 'Aa奶糖油画体','干就完事了简';
	line-height:1.5em;
}
.h3{
	font-family:"Aa奇思胖丫儿";
	color:green;
	background:yellow;
}
b{
	font-size:1.2em;
	-webkit-text-stroke:0.01em #0f0;
}

q::before,q::after{
	content:"";
}
#btnToggle {
    background-color: #4CAF50; /* Green */
    border: none;
    color: yellow;
    padding: 0.3em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2em;
	 border-radius:0.5em;
	 box-shadow: 0.1em 0.15em teal;
}
/*拼写正确时的文字样式*/
.typeGood{
 	background-color:#0f0; /*transparent：透明*/
}
/*拼写错误时的文字样式*/
/*没有拼写出来的文字样式*/
.typeBad, .typeMissed{
 	background-color:#ff0;
	color:red;
	font-weight:bold;
}

code#typeans {
	font-family: "Aa虎头虎脑";
	font-weight:bold;
}
.note{
	text-indent:2em;
	margin:1em 0em;
}
/*在用户输入的答案前添加提示*/
code#typeans::before {
	content:"你的答案：";
	color:#33c;
}
/*隐藏anki生成的箭头，该箭头包含在一个id为typearrow的span中*/
#typearrow{
	display:none;
}
/*跳过向下箭头元素及其后面的br元素，添加提示。当然我们可以利用
JavaScript查出那个元素的标签名是span*/
#typearrow + br + *::before{
	content:"正确答案：";
	color:#33c;
	-webkit-text-stroke:0em;
}

这篇文章本质上是上一篇文章的延续，但上一篇文章已经补充过多次，为方便阅读，在此另写一文。下面放一张背面截图：