前端编程小案例可以通过以下步骤来编写：
确定案例目标
明确案例要实现的功能或效果，例如隐藏扩展域、显示商品信息、创建模态对话框等。
编写HTML结构
根据案例目标，构建相应的HTML结构。例如，创建一个包含商品信息的`div`，或者一个显示模态对话框的结构。
添加CSS样式
使用CSS来美化页面元素，实现所需的视觉效果。例如，设置元素的样式、布局和动画效果。
编写JavaScript代码
如果案例需要交互功能，可以使用JavaScript来实现。例如，添加鼠标悬停效果、显示隐藏内容、处理表单提交等。
测试和调试
在不同浏览器和设备上测试案例，确保其兼容性和稳定性。
案例：隐藏扩展域并去掉after伪元素和高度
HTML代码：
```html